漏洞修复
This commit is contained in:
parent
5963863b0b
commit
8d2a569bcb
|
|
@ -0,0 +1,19 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 获取左侧树列表接口
|
||||
export function getLeftTreeListAPI(data) {
|
||||
return request({
|
||||
url: '/smartArchives/file/share/listAll',
|
||||
method: 'GET',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
||||
// 获取数据列表接口
|
||||
export function getListDataSetAPI(query) {
|
||||
return request({
|
||||
url: '/smartArchives/file/share/list',
|
||||
method: 'GET',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
|
|
@ -11,6 +11,10 @@
|
|||
</template>
|
||||
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button plain size="mini" type="primary" icon="el-icon-view" v-hasPermi="['files:multi:list']"
|
||||
@click="handleDetail(data)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['files:multi:update']"
|
||||
@click="handleUpdate(data)">
|
||||
修改
|
||||
|
|
@ -19,11 +23,11 @@
|
|||
@click="handleDelete(data)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</template>1
|
||||
</TableModel>
|
||||
<!-- 新增/编辑 -->
|
||||
<FileDimensionForm v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
|
||||
@closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="loading" :width="600" />
|
||||
@closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="isAdd === 'detail'" :width="600" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -67,6 +71,14 @@ export default {
|
|||
this.isAdd = 'add';
|
||||
this.isflag = true;
|
||||
},
|
||||
|
||||
/** 查看详情按钮操作 */
|
||||
handleDetail(row) {
|
||||
this.title = "详情";
|
||||
this.isAdd = 'detail'; // 标记为详情模式
|
||||
this.row = row;
|
||||
this.isflag = true;
|
||||
},
|
||||
closeDialog() {
|
||||
this.isflag = false;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,226 +1,270 @@
|
|||
<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="fileRelated">
|
||||
<el-select class="form-item" v-model="form.fileRelated" filterable clearable
|
||||
placeholder="请选择档案相关类型">
|
||||
<el-option v-for="item in dict.type.file_related_type" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类名称" prop="classifyName">
|
||||
<el-input class="form-item" v-model="form.classifyName" clearable show-word-limit
|
||||
placeholder="请输入分类名称" maxlength="64"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="维度" prop="dimension">
|
||||
<el-select class="form-item" v-model="form.dimension" filterable clearable
|
||||
placeholder="请选择维度">
|
||||
<el-option v-for="item in dict.type.dimension" :key="item.value" :label="item.label"
|
||||
:value="item.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类描述" prop="classifyDesc">
|
||||
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" class="form-item"
|
||||
v-model="form.classifyDesc" 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>
|
||||
<!-- 小型弹窗，用于完成，删除，保存等操作 -->
|
||||
<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" :disabled="disabled">
|
||||
<el-form-item label="档案相关类型" prop="fileRelated">
|
||||
<el-select class="form-item" v-model="form.fileRelated" filterable clearable
|
||||
placeholder="请选择档案相关类型" :disabled="disabled">
|
||||
<el-option v-for="item in dict.type.file_related_type" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类名称" prop="classifyName">
|
||||
<el-input class="form-item" v-model="form.classifyName" clearable show-word-limit
|
||||
placeholder="请输入分类名称" maxlength="64" :disabled="disabled"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="维度" prop="dimension">
|
||||
<el-select class="form-item" v-model="form.dimension" filterable clearable
|
||||
placeholder="请选择维度" :disabled="disabled">
|
||||
<el-option v-for="item in dict.type.dimension" :key="item.value" :label="item.label"
|
||||
:value="item.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类描述" prop="classifyDesc">
|
||||
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" class="form-item"
|
||||
v-model="form.classifyDesc" clearable show-word-limit placeholder="请输入分类描述" maxlength="255" :disabled="disabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer" v-if="!disabled">
|
||||
<el-button class="clear-btn" @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" class="search-btn"
|
||||
@click="submitForm('ruleForm')">确认</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import {
|
||||
addKyFilesMultiClassifyAPI,
|
||||
updateKyFilesMultiClassifyAPI,
|
||||
addKyFilesMultiClassifyAPI,
|
||||
updateKyFilesMultiClassifyAPI,
|
||||
} from '@/api/archivesManagement/archClassification'
|
||||
export default {
|
||||
name: "FileDimensionForm",
|
||||
props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
|
||||
dicts: ['dimension','file_related_type'],
|
||||
data() {
|
||||
return {
|
||||
lDialog: this.width > 500 ? "w700" : "w500",
|
||||
dialogVisible: true,
|
||||
isDisabled: true,
|
||||
form: {
|
||||
fileRelated:null,
|
||||
classifyName: null,
|
||||
dimension: null,
|
||||
classifyDesc: null,
|
||||
},
|
||||
loading: null,
|
||||
rules: {
|
||||
fileRelated: [
|
||||
{ required: true, message: '请选择档案相关类型', trigger: 'change' }
|
||||
],
|
||||
classifyName: [
|
||||
{ required: true, message: '分类名称不能为空', trigger: 'blur' }
|
||||
],
|
||||
dimension: [
|
||||
{ required: true, message: '请选择维度', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
errorObj: {
|
||||
classifyName: '分类名称',
|
||||
classifyDesc: '分类描述',
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initFormData();
|
||||
},
|
||||
methods: {
|
||||
/** 初始化表单数据 */
|
||||
initFormData() {
|
||||
if (this.isAdd === 'edit' && this.rowData) {
|
||||
// console.log(this.rowData);
|
||||
// 编辑模式：填充表单数据
|
||||
this.form = {
|
||||
id: this.rowData.id,
|
||||
classifyName: this.rowData.classifyName || null,
|
||||
dimension: this.rowData.dimension || null,
|
||||
classifyDesc: this.rowData.classifyDesc || null,
|
||||
fileRelated: this.rowData.fileRelatedId || null,
|
||||
};
|
||||
} else {
|
||||
// 新增模式：重置表单
|
||||
this.form = {
|
||||
classifyName: null,
|
||||
dimension: null,
|
||||
classifyDesc: null,
|
||||
fileRelated:null
|
||||
};
|
||||
}
|
||||
},
|
||||
/*关闭弹窗 */
|
||||
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 = {
|
||||
classifyName: null,
|
||||
dimension: null,
|
||||
classifyDesc: null,
|
||||
fileRelated: null,
|
||||
};
|
||||
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') {
|
||||
addKyFilesMultiClassifyAPI(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(this.errorMsg(error));
|
||||
});
|
||||
} else {
|
||||
updateKyFilesMultiClassifyAPI(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(this.errorMsg(error));
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
errorMsg(error) {
|
||||
const errorMessage = error.message;
|
||||
const errorArr = errorMessage.split('：');
|
||||
const errorObjData = errorArr.length > 1 ? JSON.parse(errorArr[1]) : '';
|
||||
if(errorObjData){
|
||||
return this.errorObj[errorObjData.paramName] + errorArr[0] + ':' + errorObjData.originalValue;
|
||||
}else{
|
||||
return errorMessage;
|
||||
}
|
||||
|
||||
name: "FileDimensionForm",
|
||||
props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
|
||||
dicts: ['dimension','file_related_type'],
|
||||
data() {
|
||||
return {
|
||||
lDialog: this.width > 500 ? "w700" : "w500",
|
||||
dialogVisible: true,
|
||||
isDisabled: true,
|
||||
form: {
|
||||
fileRelated:null,
|
||||
classifyName: null,
|
||||
dimension: null,
|
||||
classifyDesc: null,
|
||||
},
|
||||
loading: null,
|
||||
rules: {
|
||||
fileRelated: [
|
||||
{ required: true, message: '请选择档案相关类型', trigger: 'change' }
|
||||
],
|
||||
classifyName: [
|
||||
{ required: true, message: '分类名称不能为空', trigger: 'blur' }
|
||||
],
|
||||
dimension: [
|
||||
{ required: true, message: '请选择维度', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
errorObj: {
|
||||
classifyName: '分类名称',
|
||||
classifyDesc: '分类描述',
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听 rowData 变化，确保数据正确回显
|
||||
rowData: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.initFormData();
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
// 监听 disabled 变化，确保详情模式正确禁用
|
||||
disabled: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
// 在详情模式下，确保表单验证规则不会干扰显示
|
||||
this.rules = {};
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initFormData();
|
||||
},
|
||||
methods: {
|
||||
/** 初始化表单数据 */
|
||||
initFormData() {
|
||||
if ((this.isAdd === 'edit' || this.isAdd === 'detail') && this.rowData) {
|
||||
// 编辑模式或详情模式：填充表单数据
|
||||
this.form = {
|
||||
id: this.rowData.id,
|
||||
classifyName: this.rowData.classifyName || null,
|
||||
dimension: this.rowData.dimension || null,
|
||||
classifyDesc: this.rowData.classifyDesc || null,
|
||||
fileRelated: this.rowData.fileRelatedId || null,
|
||||
};
|
||||
} else {
|
||||
// 新增模式：重置表单
|
||||
this.form = {
|
||||
classifyName: null,
|
||||
dimension: null,
|
||||
classifyDesc: null,
|
||||
fileRelated:null
|
||||
};
|
||||
}
|
||||
},
|
||||
/*关闭弹窗 */
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.$emit("closeDialog");
|
||||
},
|
||||
/**确认弹窗 */
|
||||
sureBtnClick() {
|
||||
this.dialogVisible = false;
|
||||
this.$emit("closeDialog");
|
||||
},
|
||||
/**重置表单*/
|
||||
reset() {
|
||||
this.form = {
|
||||
classifyName: null,
|
||||
dimension: null,
|
||||
classifyDesc: null,
|
||||
fileRelated: null,
|
||||
};
|
||||
this.resetForm("ruleForm");
|
||||
},
|
||||
handleReuslt(res) {
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
this.reset();
|
||||
this.$emit('handleQuery');
|
||||
this.handleClose();
|
||||
},
|
||||
/**验证 */
|
||||
submitForm(formName) {
|
||||
// 在详情模式下不执行提交操作
|
||||
if (this.disabled) {
|
||||
this.handleClose();
|
||||
return;
|
||||
}
|
||||
|
||||
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') {
|
||||
addKyFilesMultiClassifyAPI(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(this.errorMsg(error));
|
||||
});
|
||||
} else {
|
||||
updateKyFilesMultiClassifyAPI(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(this.errorMsg(error));
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
errorMsg(error) {
|
||||
const errorMessage = error.message;
|
||||
const errorArr = errorMessage.split('：');
|
||||
const errorObjData = errorArr.length > 1 ? JSON.parse(errorArr[1]) : '';
|
||||
if(errorObjData){
|
||||
return this.errorObj[errorObjData.paramName] + errorArr[0] + ':' + errorObjData.originalValue;
|
||||
}else{
|
||||
return errorMessage;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.w700 ::v-deep .el-dialog {
|
||||
width: 700px;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.w500 ::v-deep .el-dialog {
|
||||
width: 500px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.w500 ::v-deep .el-dialog__header,
|
||||
.w700 ::v-deep .el-dialog__header {
|
||||
// background: #eeeeee;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.yxq .el-range-separator {
|
||||
margin-right: 7px !important;
|
||||
margin-right: 7px !important;
|
||||
}
|
||||
|
||||
.el-date-editor--daterange.el-input__inner {
|
||||
width: 260px;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select-style {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
||||
/* 详情模式下的样式 */
|
||||
::v-deep .el-form-item.is-disabled .el-form-item__label {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
::v-deep .el-input.is-disabled .el-input__inner {
|
||||
background-color: #f5f7fa;
|
||||
border-color: #e4e7ed;
|
||||
color: #606266;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea.is-disabled .el-textarea__inner {
|
||||
background-color: #f5f7fa;
|
||||
border-color: #e4e7ed;
|
||||
color: #606266;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
::v-deep .el-select.is-disabled .el-input__inner {
|
||||
background-color: #f5f7fa;
|
||||
border-color: #e4e7ed;
|
||||
color: #606266;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@
|
|||
</template>
|
||||
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['files:customize:list']"
|
||||
@click="handleDetail(data)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['files:customize:update']"
|
||||
@click="handleUpdate(data)">
|
||||
修改
|
||||
|
|
@ -23,7 +27,7 @@
|
|||
</TableModel>
|
||||
<!-- 新增/编辑 -->
|
||||
<CustomizeForm v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
|
||||
@closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="loading" :width="600" />
|
||||
@closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="isAdd === 'detail'" :width="600" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -73,6 +77,13 @@ export default {
|
|||
showColose() {
|
||||
this.isflag = false;
|
||||
},
|
||||
/** 详情操作 */
|
||||
handleDetail(row) {
|
||||
this.title = "详情";
|
||||
this.isAdd = 'detail'; // 标记为详情模式
|
||||
this.row = row;
|
||||
this.isflag = true;
|
||||
},
|
||||
/** 修改操作 */
|
||||
handleUpdate(row) {
|
||||
this.title = "修改";
|
||||
|
|
|
|||
|
|
@ -1,195 +1,240 @@
|
|||
<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="120px">
|
||||
<el-form-item label="自定义分类名称" prop="customizeClassifyName">
|
||||
<el-input class="form-item" v-model="form.customizeClassifyName" clearable show-word-limit
|
||||
placeholder="请输入自定义分类名称" maxlength="64"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类描述" prop="classifyDesc">
|
||||
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" class="form-item"
|
||||
v-model="form.classifyDesc" 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>
|
||||
<!-- 小型弹窗，用于完成，删除，保存等操作 -->
|
||||
<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="120px" :disabled="disabled">
|
||||
<el-form-item label="自定义分类名称" prop="customizeClassifyName">
|
||||
<el-input class="form-item" v-model="form.customizeClassifyName" clearable show-word-limit
|
||||
placeholder="请输入自定义分类名称" maxlength="64" :disabled="disabled"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类描述" prop="classifyDesc">
|
||||
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" class="form-item"
|
||||
v-model="form.classifyDesc" clearable show-word-limit placeholder="请输入分类描述" maxlength="255" :disabled="disabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer" v-if="!disabled">
|
||||
<el-button class="clear-btn" @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" class="search-btn"
|
||||
@click="submitForm('ruleForm')">确认</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import {
|
||||
addKyFilesCustomizeClassifyAPI,
|
||||
updateKyFilesCustomizeClassifyAPI,
|
||||
addKyFilesCustomizeClassifyAPI,
|
||||
updateKyFilesCustomizeClassifyAPI,
|
||||
} from '@/api/archivesManagement/archCustomClassification'
|
||||
export default {
|
||||
name: "CustomizeForm",
|
||||
props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
|
||||
dicts: ['dimension'],
|
||||
data() {
|
||||
return {
|
||||
lDialog: this.width > 500 ? "w700" : "w500",
|
||||
dialogVisible: true,
|
||||
isDisabled: true,
|
||||
form: {
|
||||
customizeClassifyName: null,
|
||||
classifyDesc: null,
|
||||
},
|
||||
loading: null,
|
||||
rules: {
|
||||
customizeClassifyName: [
|
||||
{ required: true, message: '自定义分类名称不能为空', trigger: 'blur' }
|
||||
],
|
||||
},
|
||||
errorObj: {
|
||||
customizeClassifyName: '自定义分类名称',
|
||||
classifyDesc: '分类描述',
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initFormData();
|
||||
},
|
||||
methods: {
|
||||
/** 初始化表单数据 */
|
||||
initFormData() {
|
||||
if (this.isAdd === 'edit' && this.rowData) {
|
||||
// 编辑模式：填充表单数据
|
||||
this.form = {
|
||||
customizeClassifyName: this.rowData.customizeClassifyName || '',
|
||||
classifyDesc: this.rowData.classifyDesc || '',
|
||||
id: this.rowData.id || null,
|
||||
};
|
||||
} else {
|
||||
// 新增模式：重置表单
|
||||
this.form = {
|
||||
customizeClassifyName: null,
|
||||
classifyDesc: null,
|
||||
};
|
||||
}
|
||||
},
|
||||
/*关闭弹窗 */
|
||||
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 = {
|
||||
customizeClassifyName: null,
|
||||
classifyDesc: null,
|
||||
id:null
|
||||
};
|
||||
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') {
|
||||
addKyFilesCustomizeClassifyAPI(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(this.errorMsg(error));
|
||||
});
|
||||
} else {
|
||||
updateKyFilesCustomizeClassifyAPI(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(this.errorMsg(error));
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
errorMsg(error) {
|
||||
const errorMessage = error.message;
|
||||
const errorArr = errorMessage.split('：');
|
||||
const errorObjData = errorArr.length > 1 ? JSON.parse(errorArr[1]) : '';
|
||||
if(errorObjData){
|
||||
return this.errorObj[errorObjData.paramName] + errorArr[0] + ':' + errorObjData.originalValue;
|
||||
}else{
|
||||
return errorMessage;
|
||||
}
|
||||
|
||||
name: "CustomizeForm",
|
||||
props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
|
||||
dicts: ['dimension'],
|
||||
data() {
|
||||
return {
|
||||
lDialog: this.width > 500 ? "w700" : "w500",
|
||||
dialogVisible: true,
|
||||
isDisabled: true,
|
||||
form: {
|
||||
customizeClassifyName: null,
|
||||
classifyDesc: null,
|
||||
},
|
||||
loading: null,
|
||||
rules: {
|
||||
customizeClassifyName: [
|
||||
{ required: true, message: '自定义分类名称不能为空', trigger: 'blur' }
|
||||
],
|
||||
},
|
||||
errorObj: {
|
||||
customizeClassifyName: '自定义分类名称',
|
||||
classifyDesc: '分类描述',
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听 rowData 变化，确保数据正确回显
|
||||
rowData: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.initFormData();
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
// 监听 disabled 变化，确保详情模式正确禁用
|
||||
disabled: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
// 在详情模式下，清空验证规则避免干扰显示
|
||||
this.rules = {};
|
||||
} else {
|
||||
// 非详情模式恢复验证规则
|
||||
this.rules = {
|
||||
customizeClassifyName: [
|
||||
{ required: true, message: '自定义分类名称不能为空', trigger: 'blur' }
|
||||
],
|
||||
};
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initFormData();
|
||||
},
|
||||
methods: {
|
||||
/** 初始化表单数据 */
|
||||
initFormData() {
|
||||
if ((this.isAdd === 'edit' || this.isAdd === 'detail') && this.rowData) {
|
||||
// 编辑模式或详情模式：填充表单数据
|
||||
this.form = {
|
||||
customizeClassifyName: this.rowData.customizeClassifyName || '',
|
||||
classifyDesc: this.rowData.classifyDesc || '',
|
||||
id: this.rowData.id || null,
|
||||
};
|
||||
} else {
|
||||
// 新增模式：重置表单
|
||||
this.form = {
|
||||
customizeClassifyName: null,
|
||||
classifyDesc: null,
|
||||
};
|
||||
}
|
||||
},
|
||||
/*关闭弹窗 */
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.$emit("closeDialog");
|
||||
},
|
||||
/**确认弹窗 */
|
||||
sureBtnClick() {
|
||||
this.dialogVisible = false;
|
||||
this.$emit("closeDialog");
|
||||
},
|
||||
/**重置表单*/
|
||||
reset() {
|
||||
this.form = {
|
||||
customizeClassifyName: null,
|
||||
classifyDesc: null,
|
||||
id:null
|
||||
};
|
||||
this.resetForm("ruleForm");
|
||||
},
|
||||
handleReuslt(res) {
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
this.reset();
|
||||
this.$emit('handleQuery');
|
||||
this.handleClose();
|
||||
},
|
||||
/**验证 */
|
||||
submitForm(formName) {
|
||||
// 在详情模式下不执行提交操作，直接关闭弹窗
|
||||
if (this.disabled) {
|
||||
this.handleClose();
|
||||
return;
|
||||
}
|
||||
|
||||
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') {
|
||||
addKyFilesCustomizeClassifyAPI(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(this.errorMsg(error));
|
||||
});
|
||||
} else {
|
||||
updateKyFilesCustomizeClassifyAPI(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(this.errorMsg(error));
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
errorMsg(error) {
|
||||
const errorMessage = error.message;
|
||||
const errorArr = errorMessage.split('：');
|
||||
const errorObjData = errorArr.length > 1 ? JSON.parse(errorArr[1]) : '';
|
||||
if(errorObjData){
|
||||
return this.errorObj[errorObjData.paramName] + errorArr[0] + ':' + errorObjData.originalValue;
|
||||
}else{
|
||||
return errorMessage;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.w700 ::v-deep .el-dialog {
|
||||
width: 700px;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.w500 ::v-deep .el-dialog {
|
||||
width: 500px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.w500 ::v-deep .el-dialog__header,
|
||||
.w700 ::v-deep .el-dialog__header {
|
||||
// background: #eeeeee;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.yxq .el-range-separator {
|
||||
margin-right: 7px !important;
|
||||
margin-right: 7px !important;
|
||||
}
|
||||
|
||||
.el-date-editor--daterange.el-input__inner {
|
||||
width: 260px;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select-style {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
||||
/* 详情模式下的样式 */
|
||||
::v-deep .el-form-item.is-disabled .el-form-item__label {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
::v-deep .el-input.is-disabled .el-input__inner {
|
||||
background-color: #f5f7fa;
|
||||
border-color: #e4e7ed;
|
||||
color: #606266;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea.is-disabled .el-textarea__inner {
|
||||
background-color: #f5f7fa;
|
||||
border-color: #e4e7ed;
|
||||
color: #606266;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<!-- 左侧树 -->
|
||||
<div>
|
||||
<el-card style="min-height: calc(100vh - 125px)">
|
||||
<el-row :gutter="20" style="display: flex; align-items: center">
|
||||
<el-col :span="16">
|
||||
<el-input v-model="filterText" placeholder="输入关键字">
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-button type="primary" size="small" @click="onHandleSearch">
|
||||
查询
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="tree-container">
|
||||
<el-tree ref="leftTreeRef" :data="displayedTreeData" default-expand-all class="left-tree-list"
|
||||
@node-click="onHandleNodeClick">
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLeftTreeListAPI } from '@/api/data-collect/file-share-manage'
|
||||
import { validSecurity } from '@/utils/validate'
|
||||
export default {
|
||||
name: 'LeftTree',
|
||||
data() {
|
||||
return {
|
||||
treeDataList: [
|
||||
{
|
||||
label: '档案分享管理',
|
||||
id: 0,
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
displayedTreeData: [],
|
||||
filterText: '',
|
||||
originalTreeData: [], // 保存原始数据
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
// 节点点击事件
|
||||
onHandleNodeClick(data) {
|
||||
this.$emit('handleNodeClick', data)
|
||||
},
|
||||
|
||||
convertToVueTree(data) {
|
||||
return data.map(item => ({
|
||||
id: item.code,
|
||||
label: item.name,
|
||||
children: item.kyDataClassifyList ? item.kyDataClassifyList.map(child => ({
|
||||
id: child.id,
|
||||
label: child.dataTypeName,
|
||||
children: []
|
||||
})) : []
|
||||
}));
|
||||
},
|
||||
// 获取左侧树列表
|
||||
async getLeftTreeList() {
|
||||
const res = await getLeftTreeListAPI()
|
||||
const transformedData = this.convertToVueTree(res.rows)
|
||||
this.treeDataList[0].children = transformedData
|
||||
// 保存原始数据
|
||||
this.originalTreeData = JSON.parse(JSON.stringify(this.treeDataList))
|
||||
// 初始化显示数据
|
||||
this.displayedTreeData = JSON.parse(JSON.stringify(this.treeDataList))
|
||||
},
|
||||
// 点击查询触发过滤
|
||||
onHandleSearch() {
|
||||
if (!this.filterText) {
|
||||
this.displayedTreeData = JSON.parse(JSON.stringify(this.treeDataList))
|
||||
return
|
||||
}
|
||||
|
||||
// 安全校验
|
||||
if (!validSecurity(this.filterText)) {
|
||||
this.$message.error('输入内容包含非法字符，请重新输入')
|
||||
return
|
||||
}
|
||||
|
||||
this.displayedTreeData = this.filterTreeData(this.treeDataList)
|
||||
},
|
||||
// 递归过滤树数据
|
||||
filterTreeData(treeData) {
|
||||
const result = []
|
||||
for (const node of treeData) {
|
||||
const newNode = { ...node }
|
||||
if (node.children && node.children.length > 0) {
|
||||
const filteredChildren = this.filterTreeData(node.children)
|
||||
if (filteredChildren.length > 0) {
|
||||
newNode.children = filteredChildren
|
||||
result.push(newNode)
|
||||
} else if (node.label.indexOf(this.filterText) !== -1) {
|
||||
// 如果父节点匹配，保留所有子节点
|
||||
result.push(node)
|
||||
}
|
||||
} else if (node.label.indexOf(this.filterText) !== -1) {
|
||||
result.push(newNode)
|
||||
}
|
||||
}
|
||||
return result
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getLeftTreeList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tree-container {
|
||||
margin-top: 10px;
|
||||
max-height: calc(100vh - 230px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.left-tree-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.tree-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.tree-container::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.tree-container::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.tree-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,298 @@
|
|||
<template>
|
||||
<!-- 右侧表格 -->
|
||||
<div>
|
||||
<el-card style="min-height: calc(100vh - 125px)">
|
||||
<!-- 查询 -->
|
||||
<el-form size="small" ref="queryForm" :inline="true" :model="queryParams">
|
||||
<el-form-item prop="dataTypeName">
|
||||
<el-input clearable placeholder="搜索" v-model="queryParams.dataTypeName"
|
||||
@keyup.enter.native="onHandleQuery" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button size="mini" type="primary" icon="el-icon-search" @click="onHandleQuery">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="mini" icon="el-icon-refresh" @click="onResetQuery">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table :data="filteredTableData" border :height="tableHeight" style="width: 100%" header-align="center">
|
||||
<el-table-column v-if="tableData && tableData.length" type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column align="center" :key="column.prop" :prop="column.prop" :label="column.label"
|
||||
v-for="column in columns" />
|
||||
<el-table-column v-if="tableData && tableData.length" label="操作" width="100" align="center" class-name="action-col" label-class-name="action-col-header">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button plain type="primary" size="mini" class="action-btn" icon="el-icon-share" @click="handleShare(row)" v-hasPermi="['file:Collect:share']">分享</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Share v-if="isflag" :rowData="row" :title="title"
|
||||
@closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="loading" :width="600" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getListDataSetAPI } from '@/api/data-collect/file-share-manage'
|
||||
import Share from './share.vue'
|
||||
import { validSecurity } from '@/utils/validate'
|
||||
export default {
|
||||
name: 'RightTable',
|
||||
components: {
|
||||
Share
|
||||
},
|
||||
props: {
|
||||
selectedNodeId: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
selectedNodeName: {
|
||||
type: [String],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isflag: false,
|
||||
loading: false,
|
||||
row: {},
|
||||
title: '分享',
|
||||
queryParams: {
|
||||
dataTypeName: undefined,
|
||||
},
|
||||
tableData: [],
|
||||
columns: [],
|
||||
tableHeight: 400,
|
||||
filteredManual: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 按第二个字段进行本地过滤
|
||||
filteredTableData() {
|
||||
// 仅在点击“查询”后使用过滤结果；输入变化不自动过滤
|
||||
if (Array.isArray(this.filteredManual)) return this.filteredManual
|
||||
return this.tableData
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 分享
|
||||
handleShare(row) {
|
||||
// console.log(row);
|
||||
|
||||
this.isflag = true;
|
||||
row.selectedNodeName = this.selectedNodeName;
|
||||
row.selectedNodeId = this.selectedNodeId;
|
||||
row.jsonId = row.id;
|
||||
|
||||
this.row = row;
|
||||
},
|
||||
closeDialog() {
|
||||
this.isflag = false;
|
||||
},
|
||||
showColose() {
|
||||
this.isflag = false;
|
||||
},
|
||||
|
||||
// 查询：按第一列字段做模糊匹配
|
||||
onHandleQuery() {
|
||||
if (!Array.isArray(this.columns) || this.columns.length < 1) return
|
||||
const targetProp = this.columns[0] && this.columns[0].prop
|
||||
if (!targetProp) return
|
||||
const keyword = String(this.queryParams.dataTypeName || '').trim()
|
||||
if (!keyword) {
|
||||
// 空关键字还原
|
||||
this.filteredManual = null
|
||||
return
|
||||
}
|
||||
|
||||
// 安全校验
|
||||
if (!validSecurity(keyword)) {
|
||||
this.$message.error('搜索内容包含非法字符，请重新输入')
|
||||
return
|
||||
}
|
||||
|
||||
// 执行一次性本地过滤
|
||||
const source = Array.isArray(this.tableData) ? this.tableData : []
|
||||
const kw = keyword.toLowerCase()
|
||||
this.filteredManual = source.filter(row => {
|
||||
const val = row && targetProp in row ? row[targetProp] : ''
|
||||
return String(val ?? '').toLowerCase().includes(kw)
|
||||
})
|
||||
// 触发一次高度计算，避免数据量变化造成滚动体验不佳
|
||||
this.computeTableHeight()
|
||||
},
|
||||
|
||||
// 重置
|
||||
onResetQuery() {
|
||||
this.queryParams = { dataTypeName: undefined }
|
||||
this.filteredManual = null
|
||||
this.computeTableHeight()
|
||||
},
|
||||
|
||||
// 获取数据列表
|
||||
async getListDataSetClassFun(node) {
|
||||
const params = {
|
||||
dataClassifyId: node,
|
||||
}
|
||||
const res = await getListDataSetAPI(params)
|
||||
|
||||
// 安全解析与渲染
|
||||
this.columns = []
|
||||
this.tableData = []
|
||||
if (!res || !Array.isArray(res.rows) || res.rows.length === 0) {
|
||||
this.forceTableLayout()
|
||||
return
|
||||
}
|
||||
|
||||
const firstRow = res.rows[0]
|
||||
if (!firstRow || !firstRow.dataJson) {
|
||||
this.forceTableLayout()
|
||||
return
|
||||
}
|
||||
|
||||
let dataList = []
|
||||
try {
|
||||
dataList = JSON.parse(firstRow.dataJson)
|
||||
} catch (e) {
|
||||
console.warn('数据集 dataJson 解析失败:', e)
|
||||
this.forceTableLayout()
|
||||
return
|
||||
}
|
||||
|
||||
if (!Array.isArray(dataList) || dataList.length === 0) {
|
||||
this.forceTableLayout()
|
||||
return
|
||||
}
|
||||
|
||||
const [header, ...rows] = dataList
|
||||
if (header && typeof header === 'object') {
|
||||
this.columns = Object.entries(header)
|
||||
.filter(([prop]) => String(prop).toLowerCase() !== 'id')
|
||||
.map(([prop, label], index) => ({
|
||||
label: String(label),
|
||||
prop: String(prop),
|
||||
width: index === 0 ? '120' : undefined,
|
||||
align: index === 0 ? 'left' : 'center',
|
||||
}))
|
||||
}
|
||||
|
||||
const propOrder = this.columns.map(c => c.prop)
|
||||
this.tableData = rows.map(row => {
|
||||
if (Array.isArray(row)) {
|
||||
const obj = {}
|
||||
for (let i = 0; i < propOrder.length; i++) {
|
||||
obj[propOrder[i]] = row[i]
|
||||
}
|
||||
return obj
|
||||
}
|
||||
return row || {}
|
||||
})
|
||||
|
||||
this.forceTableLayout()
|
||||
},
|
||||
|
||||
// 强制表格重新布局
|
||||
forceTableLayout() {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
// 获取表格实例并调用 doLayout
|
||||
const table = this.$el.querySelector('.el-table')
|
||||
if (table && table.__vue__) {
|
||||
table.__vue__.doLayout()
|
||||
}
|
||||
this.computeTableHeight()
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
// 计算表格高度（使用固定 height，滚动更顺滑）
|
||||
computeTableHeight() {
|
||||
this.$nextTick(() => {
|
||||
const topOffset = this.$el ? this.$el.getBoundingClientRect().top : 0
|
||||
const formHeight = this.$refs.queryForm && this.$refs.queryForm.$el
|
||||
? this.$refs.queryForm.$el.offsetHeight
|
||||
: 0
|
||||
// 额外预留：卡片内边距、表格头部等
|
||||
const extra = 100
|
||||
const available = window.innerHeight - topOffset - formHeight - extra
|
||||
this.tableHeight = Math.max(260, available)
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
// 监听选中的节点ID
|
||||
watch: {
|
||||
selectedNodeId: {
|
||||
handler(newVal) {
|
||||
this.columns = []
|
||||
this.tableData = []
|
||||
this.getListDataSetClassFun(newVal)
|
||||
},
|
||||
immediate: true, // 表示立即执行
|
||||
},
|
||||
selectedNodeName: {
|
||||
handler(newVal2) {
|
||||
this.selectedNodeName = newVal2
|
||||
},
|
||||
immediate: true, // 表示立即执行
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const onResize = () => this.computeTableHeight()
|
||||
this.computeTableHeight()
|
||||
window.addEventListener('resize', onResize)
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
window.removeEventListener('resize', onResize)
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 加粗表格滚动条 */
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar,
|
||||
::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar {
|
||||
width: 10px; /* 垂直滚动条宽度 */
|
||||
height: 10px; /* 水平滚动条高度 */
|
||||
}
|
||||
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track,
|
||||
::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb,
|
||||
::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar-thumb {
|
||||
background: #bfbfbf;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover,
|
||||
::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
background: #a6a6a6;
|
||||
}
|
||||
|
||||
/* 操作列样式统一，避免按钮受表格行样式影响抖动或换行 */
|
||||
/* 操作列单元格与其它列统一高度与内边距，避免不对齐 */
|
||||
::v-deep .action-col .cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8px !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::v-deep .action-col-header .cell {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 3px 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
<template>
|
||||
<!-- 小型弹窗 -->
|
||||
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
|
||||
:closeOnClickModal="false" @close="handleClose" :append-to-body="true">
|
||||
<div>
|
||||
<!-- 文档式表格 -->
|
||||
<div class="doc-wrap">
|
||||
<table class="doc-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<td>获取{{ rowData.selectedNodeName }}文件接口</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>描述</th>
|
||||
<td>依据ID获取{{ rowData.selectedNodeName }}文件</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>URL</th>
|
||||
<td>smart-archiving-api/smartArchives/file/share/queryById?id={{ rowData.selectedNodeId }}&jsonId={{ rowData.jsonId }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>HTTP请求方式</th>
|
||||
<td>GET</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>请求参数</th>
|
||||
<td>
|
||||
<table class="inner-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数名称</th>
|
||||
<th>必选</th>
|
||||
<th>类型及范围</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>id</td>
|
||||
<td>true</td>
|
||||
<td>字符串</td>
|
||||
<td>/</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- <tr>-->
|
||||
<!-- <th>返回结果</th>-->
|
||||
<!-- <td>-->
|
||||
<!-- <pre class="code" v-text="resultJson"></pre>-->
|
||||
<!-- </td>-->
|
||||
<!-- </tr>-->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "Share",
|
||||
props: ["width", "dataForm", "title", "disabled", "rowData"],
|
||||
data() {
|
||||
return {
|
||||
lDialog: this.width > 500 ? "w700" : "w500",
|
||||
dialogVisible: true,
|
||||
isDisabled: true,
|
||||
resultJson: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initFormData();
|
||||
},
|
||||
methods: {
|
||||
/** 初始化表单数据 */
|
||||
initFormData() {
|
||||
if (this.rowData) {
|
||||
// 将 rowData 的 data 字段（对象或数组）美化成 JSON 文本展示
|
||||
let payload = this.rowData && this.rowData.data
|
||||
if (payload === undefined) {
|
||||
// 兼容没有 data 字段时，直接把 rowData 作为展示对象
|
||||
payload = this.rowData
|
||||
}
|
||||
try {
|
||||
this.resultJson = JSON.stringify(payload, function(key, value) {
|
||||
// 过滤掉指定的字段
|
||||
if (key === 'selectedNodeName' || key === 'selectedNodeId' || key === 'jsonId') {
|
||||
return undefined; // 返回 undefined 会忽略该属性
|
||||
}
|
||||
return value;
|
||||
}, 2);
|
||||
} catch (e) {
|
||||
this.resultJson = String(payload)
|
||||
}
|
||||
}
|
||||
},
|
||||
/*关闭弹窗 */
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.$emit("closeDialog");
|
||||
/* setTimeout(() => {
|
||||
this.dialogVisible = true;
|
||||
}); */
|
||||
},
|
||||
/**确认弹窗 */
|
||||
sureBtnClick() {
|
||||
this.dialogVisible = false;
|
||||
this.$emit("closeDialog");
|
||||
/* setTimeout(() => {
|
||||
this.dialogVisible = true;
|
||||
}); */
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.w700 ::v-deep .el-dialog {
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.w500 ::v-deep .el-dialog {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.w500 ::v-deep .el-dialog__header,
|
||||
.w700 ::v-deep .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;
|
||||
}
|
||||
|
||||
.doc-wrap {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.doc-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.doc-table th,
|
||||
.doc-table td {
|
||||
border: 1px solid #dcdfe6;
|
||||
padding: 8px 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.doc-table th {
|
||||
width: 120px;
|
||||
background: #f5f7fa;
|
||||
color: #303133;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.doc-table .inner-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.doc-table .inner-table th,
|
||||
.doc-table .inner-table td {
|
||||
border: 1px solid #e4e7ed;
|
||||
padding: 6px 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: #f8f8f8;
|
||||
border: 1px solid #ebeef5;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<!-- 数据汇集管理 -->
|
||||
<div class="app-container">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="6">
|
||||
<LeftTree @handleNodeClick="handleNodeClick" />
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<RightTable :selectedNodeId="selectedNodeId" :selectedNodeName="selectedNodeName" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LeftTree from './components/left-tree.vue'
|
||||
import RightTable from './components/right-table.vue'
|
||||
export default {
|
||||
name: 'DataSetManage',
|
||||
components: {
|
||||
LeftTree,
|
||||
RightTable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 选中的节点ID
|
||||
selectedNodeId: 0,
|
||||
selectedNodeName: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 节点点击事件
|
||||
handleNodeClick(data) {
|
||||
this.selectedNodeId = data.id
|
||||
this.selectedNodeName = data.label
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -11,6 +11,10 @@
|
|||
</template>
|
||||
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['encry:type:list']"
|
||||
@click="handleDetail(data)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['encry:type:edit']"
|
||||
@click="handleUpdate(data)">
|
||||
修改
|
||||
|
|
@ -23,7 +27,7 @@
|
|||
</TableModel>
|
||||
<!-- 新增/编辑 -->
|
||||
<EncryptionForm v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
|
||||
@closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="loading" :width="600" />
|
||||
@closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="isAdd === 'detail'" :width="600" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -61,6 +65,13 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
/** 详情操作 */
|
||||
handleDetail(row) {
|
||||
this.title = "详情";
|
||||
this.isAdd = 'detail'; // 标记为详情模式
|
||||
this.row = row;
|
||||
this.isflag = true;
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.title = "新增";
|
||||
|
|
|
|||
|
|
@ -1,211 +1,263 @@
|
|||
<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>
|
||||
<!-- 小型弹窗，用于完成，删除，保存等操作 -->
|
||||
<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" :disabled="disabled">
|
||||
<el-form-item label="档案加密名称" prop="encryptName">
|
||||
<el-input class="form-item" v-model="form.encryptName" clearable show-word-limit
|
||||
placeholder="请输入档案加密名称" maxlength="20" :disabled="disabled"></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="请选择档案加密类型" :disabled="disabled">
|
||||
<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" :disabled="disabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer" v-if="!disabled">
|
||||
<el-button class="clear-btn" @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" class="search-btn"
|
||||
@click="submitForm('ruleForm')">确认</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import {
|
||||
addEncryTypeAPI,
|
||||
updateEncryTypeAPI,
|
||||
addEncryTypeAPI,
|
||||
updateEncryTypeAPI,
|
||||
} from '@/api/filesTransfer/encryption'
|
||||
|
||||
export default {
|
||||
name: "EncryptionForm",
|
||||
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' }
|
||||
],
|
||||
},
|
||||
errorObj: {
|
||||
encryptName: '档案加密名称',
|
||||
encryptParams: '档案加密参数',
|
||||
},
|
||||
};
|
||||
},
|
||||
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') {
|
||||
addEncryTypeAPI(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(this.errorMsg(error));
|
||||
});
|
||||
} else {
|
||||
updateEncryTypeAPI(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(this.errorMsg(error));
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
errorMsg(error) {
|
||||
const errorMessage = error.message;
|
||||
const errorArr = errorMessage.split('：');
|
||||
const errorObjData = errorArr.length > 1 ? JSON.parse(errorArr[1]) : '';
|
||||
if(errorObjData){
|
||||
return this.errorObj[errorObjData.paramName] + errorArr[0] + ':' + errorObjData.originalValue;
|
||||
}else{
|
||||
return errorMessage;
|
||||
}
|
||||
|
||||
name: "EncryptionForm",
|
||||
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'}
|
||||
],
|
||||
},
|
||||
errorObj: {
|
||||
encryptName: '档案加密名称',
|
||||
encryptParams: '档案加密参数',
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听 rowData 变化，确保数据正确回显
|
||||
rowData: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.initFormData();
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
// 监听 disabled 变化，确保详情模式正确禁用
|
||||
disabled: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
// 在详情模式下，清空验证规则避免干扰显示
|
||||
this.rules = {};
|
||||
} else {
|
||||
// 非详情模式恢复验证规则
|
||||
this.rules = {
|
||||
encryptName: [
|
||||
{required: true, message: '档案加密名称不能为空', trigger: 'blur'}
|
||||
],
|
||||
encryptType: [
|
||||
{required: true, message: '档案加密类型不能为空', trigger: 'change'}
|
||||
],
|
||||
encryptParams: [
|
||||
{required: true, message: '档案加密参数不能为空', trigger: 'blur'}
|
||||
],
|
||||
};
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initFormData();
|
||||
},
|
||||
methods: {
|
||||
/** 初始化表单数据 */
|
||||
initFormData() {
|
||||
if ((this.isAdd === 'edit' || this.isAdd === 'detail') && 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");
|
||||
},
|
||||
/**确认弹窗 */
|
||||
sureBtnClick() {
|
||||
this.dialogVisible = false;
|
||||
this.$emit("closeDialog");
|
||||
},
|
||||
/**重置表单*/
|
||||
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) {
|
||||
// 在详情模式下不执行提交操作，直接关闭弹窗
|
||||
if (this.disabled) {
|
||||
this.handleClose();
|
||||
return;
|
||||
}
|
||||
|
||||
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') {
|
||||
addEncryTypeAPI(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(this.errorMsg(error));
|
||||
});
|
||||
} else {
|
||||
updateEncryTypeAPI(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(this.errorMsg(error));
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
errorMsg(error) {
|
||||
const errorMessage = error.message;
|
||||
const errorArr = errorMessage.split('：');
|
||||
const errorObjData = errorArr.length > 1 ? JSON.parse(errorArr[1]) : '';
|
||||
if (errorObjData) {
|
||||
return this.errorObj[errorObjData.paramName] + errorArr[0] + ':' + errorObjData.originalValue;
|
||||
} else {
|
||||
return errorMessage;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.w700 ::v-deep .el-dialog {
|
||||
width: 700px;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.w500 ::v-deep .el-dialog {
|
||||
width: 500px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.w500 ::v-deep .el-dialog__header,
|
||||
.w700 ::v-deep .el-dialog__header {
|
||||
// background: #eeeeee;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.yxq .el-range-separator {
|
||||
margin-right: 7px !important;
|
||||
margin-right: 7px !important;
|
||||
}
|
||||
|
||||
.el-date-editor--daterange.el-input__inner {
|
||||
width: 260px;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select-style {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
||||
/* 详情模式下的样式 */
|
||||
::v-deep .el-form-item.is-disabled .el-form-item__label {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
::v-deep .el-input.is-disabled .el-input__inner {
|
||||
background-color: #f5f7fa;
|
||||
border-color: #e4e7ed;
|
||||
color: #606266;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
::v-deep .el-select.is-disabled .el-input__inner {
|
||||
background-color: #f5f7fa;
|
||||
border-color: #e4e7ed;
|
||||
color: #606266;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue