Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
3ebfc43e by fanguang
Options

fix

1 parent f96c87ab
Inline Side-by-side
Showing 4 changed files with 501 additions and 6 deletions
src/views/data_meta/components/dictFileds.vue
......@@ -209,7 +209,7 @@ const toolBtnClick = (btn) => {
rowInfo.ROWID = `upload_${tableData.value.length}`
tableData.value.unshift(rowInfo)
orginData.value.unshift(rowInfo)
tableInfo.value.page.rows = tableData.value.length
// tableInfo.value.page.rows = tableData.value.length
saveDisabled.value = false
// 表格滚动到第一行
let $tableEl = tableEl.value.tableRef
......
src/views/data_meta/components/drawer.vue 0 → 100644
<script lang="ts" setup name="Drawer">
import { computed } from "vue";
import { ClickOutside as vClickOutside } from "element-plus";
import type { FormInstance } from "element-plus";
import { Download, Upload, CirclePlus } from "@element-plus/icons-vue";
import Table from "@/components/Table/index.vue";
import Form from "@/components/Form/index.vue";
import Tree from "@/components/Tree/index.vue";
import ListPanel from "@/components/ListPanel/index.vue";
import UploadFiles from "@/components/Upload/index.vue";
const emits = defineEmits([
"drawerBtnClick",
"radioGroupChange",
"drawerSelectChange",
"drawerTableSelectChange",
"drawerTableBtnClick",
"drawerTableToolBtnClick",
"drawerFormBtnClick",
"listItemClick",
"drawerTableInputChange",
"drawerToolBtnClick",
"drawerTableSelectionChange",
"drawerTablePageChange",
"uploadBtnClick",
"beforeUPload",
"uploadFile",
"onUpload",
"onClickOutside",
]);
const props = defineProps({
drawerInfo: {
type: Object,
default: {},
},
});
const drawerTableRef = ref();
const drawerFormRef = ref();
const selectRowData = ref([]);
const formListRef = ref();
const formTreeRef = ref();
const uploadRef = ref();
const drawerVisible = computed(() => {
nextTick(() => {
if (props.drawerInfo.visible) {
drawerOpen();
}
})
return props.drawerInfo.visible;
});
const drawerDirection = computed(() => {
return props.drawerInfo.direction;
});
const drawerModal = computed(() => {
return props.drawerInfo.modal ?? true;
});
const modalClose = computed(() => {
return props.drawerInfo.modalClose ?? false;
});
const drawerModalClass = computed(() => {
nextTick(() => {
drawerOpen();
})
return props.drawerInfo.modalClass ?? "";
});
const drawerSize = computed(() => {
return props.drawerInfo.size ?? "30%";
});
const drawerType = computed(() => {
return props.drawerInfo.type ?? "form";
});
const drawerTitle = computed(() => {
return props.drawerInfo.header.title;
});
const selectOptions = computed(() => {
return props.drawerInfo.container.relateOptions ?? [];
});
const formItems = computed(() => {
return props.drawerInfo.container.formItems ?? [];
});
const formRules = computed(() => {
return props.drawerInfo.container.rules ?? {};
});
const selectData = computed(() => {
return props.drawerInfo.container.selectData ?? [];
});
const contents = computed(() => {
return props.drawerInfo.container.contents ?? [];
});
const footer = computed(() => {
return props.drawerInfo.footer;
});
const onClickOutside = (e: any) => {
emits("onClickOutside");
};
const getDrawerConRef = (refName) => {
console.log(refName, '----------')
if (refName == 'drawerTableRef') {
const dtf = drawerTableRef.value[0] || drawerTableRef.value
return dtf?.tableRef
}
// const drawerForm = drawerFormRef.value[0] || drawerFormRef.value;
if (refName == 'drawerFormRef') {
const drawerForm = drawerFormRef.value?.[0] || drawerFormRef.value;
return drawerForm
}
}
defineExpose({
// selections,
getDrawerConRef
});
const toolBtnClick = (btn, type: any = null) => {
if (type && type == "table") {
let selectData = [];
if (drawerTableRef.value) {
const drawerTable = drawerTableRef.value[0] || drawerTableRef.value;
selectData = drawerTable.tableRef.getSelectionRows();
}
emits("drawerTableToolBtnClick", btn, selectData);
} else {
emits("drawerToolBtnClick", btn);
}
};
const tableSelectionChange = (val, tId) => {
selectRowData.value = val;
emits("drawerTableSelectionChange", val, tId);
};
const tableSelectChange = (val, scope) => {
emits("drawerTableSelectChange", val, scope);
};
const tableInputChange = (val, scope) => {
emits("drawerTableInputChange", val, scope);
};
const tablePageChange = (info) => {
emits("drawerTablePageChange", info);
}
const tableBtnClick = (scope, btn) => {
emits("drawerTableBtnClick", scope, btn);
};
const submitForm = async (formEl: FormInstance | undefined, btn) => {
if (!formEl) return;
await formEl.validate((valid, fields) => {
const drawerForm = drawerFormRef.value[0] || drawerFormRef.value;
if (valid) {
const formInfo = drawerForm.formInline;
emits("drawerBtnClick", btn, formInfo);
} else {
var obj = fields && Object.keys(fields);
obj?.[0] && formEl?.scrollToField(obj?.[0])
console.log("error submit!", fields);
}
});
};
const btnClick = (btn, type) => {
if (btn.disabled) return;
if (
btn.value != "cancel" &&
(btn.value.indexOf("submit") > -1 || btn.value.indexOf("save") > -1)
) {
if (drawerFormRef.value) {
const drawerForm = drawerFormRef.value[0] || drawerFormRef.value;
const formRef = drawerForm.ruleFormRef;
submitForm(formRef, btn);
} else {
emits("drawerBtnClick", btn);
}
} else {
emits("drawerBtnClick", btn);
}
};
const radioGroupChange = (val, info) => {
emits("radioGroupChange", val, info);
};
const formSelectChange = (val, row, info) => {
emits("drawerSelectChange", val, row, info);
};
const formBtnClick = (btn) => {
emits("drawerFormBtnClick", btn);
};
const listItemClick = (row) => {
emits("listItemClick", row);
};
const onUpload = (file, fileList) => {
emits("onUpload", file, fileList);
};
const beforeUPload = (file) => {
emits("beforeUPload", file);
};
const uploadFile = (file) => {
emits("uploadFile", file);
};
const uploadBtnClick = (btn) => {
emits("uploadBtnClick", btn);
};
const drawerOpen = () => {
const wrap: any = drawerModalClass.value && document.getElementsByClassName(drawerModalClass.value)[0];
if (wrap) {
wrap.style.width = `${drawerSize.value + 1}px`
} else {
const dom: any = document.getElementsByClassName('el-overlay')[0];
dom && (dom.style.width = '100%');
}
};
const drawerClose = () => {
btnClick({ value: "cancel" }, null);
if (drawerFormRef.value) {
const drawerForm = drawerFormRef.value[0] || drawerFormRef.value;
const formRef = drawerForm.ruleFormRef;
drawerForm?.resetForm(formRef);
}
};
</script>
<template>
<el-drawer v-model="drawerVisible" :direction="drawerDirection" :size="drawerSize" :modal="drawerModal"
:close-on-click-modal="modalClose" :close-on-press-escape="modalClose" :modal-class="drawerModalClass"
destroy-on-close :z-index="props.drawerInfo.zIndex ?? null" @close="drawerClose">
<template #header>
<span class="title">{{ drawerTitle }}</span>
</template>
<template #default>
<div class="drawer-body-loading" v-if="drawerInfo.loading ?? false" v-loading="drawerInfo.loading ?? false"></div>
<div v-else class="drawer_panel" :class="[con.col]" :style="con.style" v-for="con in contents">
<div class="panel_title" v-if="con.title">{{ con.title }}</div>
<template v-if="con.type && con.type.indexOf('table') > -1">
<div class="table_tool float-right">
<template v-for="bar in con.tableTool.btns.slice(1)">
<el-popover v-if="bar.popover" :visible="bar.popover.visible" :title="bar.popover.title"
:popper-class="bar.popover.class ?? ''" placement="bottom-start" :width="bar.popover.width ?? 200"
trigger="click">
<template #reference>
<el-button :type="bar.type" @click="toolBtnClick(bar, con.type)" v-click-outside="onClickOutside"
v-preReClick>{{ bar.label }}</el-button>
</template>
<template #default>
<span v-html="bar.popover.content"></span>
</template>
</el-popover>
<el-button :type="bar.type" :plain="bar.plain" v-else @click="toolBtnClick(bar, 'table')" v-preReClick>{{
bar.label
}}</el-button>
</template>
</div>
<div class="table_panel_wrap" :style="con.tableInfo.style">
<Table ref="drawerTableRef" :class="[con.tableInfo.col]" :tableInfo="con.tableInfo"
@tableSelectChange="tableSelectChange" @tableBtnClick="tableBtnClick"
@tableSelectionChange="tableSelectionChange" @tableInputChange="tableInputChange"
@tablePageChange="tablePageChange" />
</div>
<div class="table_tool" :class="[con.tableTool.col]" v-if="con.tableTool && (con.tableTool.visible ?? true)">
<template v-for="bar in con.tableTool.btns.slice(0, 1)">
<!-- <el-popover v-if="bar.popover" :visible="bar.popover.visible" :title="bar.popover.title"
:popper-class="bar.popover.class ?? ''" placement="bottom-start" :width="bar.popover.width ?? 200"
trigger="click">
<template #reference>
<el-button :type="bar.type" @click="toolBtnClick(bar, con.type)" v-click-outside="onClickOutside"
v-preReClick>{{ bar.label }}</el-button>
</template>
<template #default>
<span v-html="bar.popover.content"></span>
</template>
</el-popover> -->
<!-- <el-button :type="bar.type" :plain="bar.plain" @click="toolBtnClick(bar, 'table')" v-preReClick>{{
bar.label
}}</el-button> -->
<div class="operation-icon" @click="toolBtnClick(bar, 'table')" v-preReClick>
<el-icon color="#4fa1a4">
<CirclePlus />
</el-icon>
<span>{{ bar.label }}</span>
</div>
</template>
</div>
</template>
<template v-else-if="con.type && con.type.indexOf('tree') > -1">
<div class="list_tree" v-if="con.type.indexOf('list') > -1">
<ListPanel ref="formListRef" :listInfo="con.listInfo" @itemClick="listItemClick" />
<Tree ref="formTreeRef" :treeInfo="con.treeInfo" />
</div>
<Tree ref="formTreeRef" :treeInfo="con.treeInfo" v-else />
</template>
<template v-else-if="con.type && con.type == 'field-list'">
<div class="field_list_panel" v-if="con.listInfo.data.length > 0">
<div class="list_item" v-for="item in con.listInfo.data">
<span class="item_field">{{ item[con.listInfo.field] }}</span>
<span class="item_text">{{ item[con.listInfo.label] }}</span>
</div>
</div>
<div class="field_list_panel">
<div class="empty_tips">暂无数据</div>
</div>
</template>
<template v-else-if="con.type && con.type.indexOf('upload') > -1">
<div class="upload_tool">
<UploadFiles ref="uploadRef" :upload-info="con.uploadInfo" @onUpload="onUpload" @beforeUPload="beforeUPload"
@uploadFile="uploadFile" @uploadBtnClick="uploadBtnClick" />
<div class="tool_btns" v-if="con.tools && con.tools.visible">
<template v-for="btn in con.tools.btns">
<el-button v-if="btn.visible ?? true" :type="btn.type" :plain="btn.plain"
@click="toolBtnClick(btn, 'table')" v-preReClick>
<el-icon v-if="btn.icon && btn.icon == 'Upload'">
<Upload />
</el-icon>
<el-icon v-else-if="btn.icon && btn.icon == 'Download'">
<Download />
</el-icon>
<span>{{ btn.label }}</span>
</el-button>
</template>
</div>
</div>
<div class="upload_table_panel_wrap" v-if="con.tableInfo && Object.keys(con.tableInfo).length">
<Table ref="drawerTableRef" :class="[con.tableInfo.col]" :tableInfo="con.tableInfo"
@tableSelectChange="tableSelectChange" @tableBtnClick="tableBtnClick"
@tableSelectionChange="tableSelectionChange" @tableInputChange="tableInputChange"
@tablePageChange="tablePageChange" />
</div>
</template>
<template v-else>
<Form ref="drawerFormRef" :itemList="con.formInfo.items" :formId="con.formInfo.id" :rules="con.formInfo.rules"
:col="con.formInfo.col" :readonly="con.formInfo.readonly" @radioGroupChange="radioGroupChange"
@selectChange="formSelectChange" @btnClick="formBtnClick">
</Form>
<!-- 插槽内容 -->
<slot></slot>
</template>
</div>
</template>
<template #footer v-if="footer.visible ?? true">
<div style="flex: auto">
<template v-for="btn in footer.btns">
<el-button v-if="btn.visible ?? true" :type="btn.type" :disabled="btn.disabled ?? false"
@click="btnClick(btn, null)" v-preReClick :loading="btn.loading ?? false">{{ btn.label }}</el-button>
</template>
</div>
</template>
</el-drawer>
</template>
<style lang="scss" scoped>
.operation-icon {
display: flex;
align-items: center;
cursor: pointer;
> span {
margin-left: 4px;
color: #4fa1a4;
}
}
.drawer-body-loading {
height: 100%;
}
.drawer_panel {
position: relative;
&.no-margin {
margin-top: 0;
}
&.height_auto {
.table_panel_wrap {
.table_panel {
min-height: unset;
}
}
}
}
.panel_title {
line-height: 40px;
font-size: 14px;
color: var(--el-color-regular);
font-weight: 600;
}
.table_tool {
height: 40px;
display: flex;
align-items: center;
&.float-right {
position: absolute;
top: 0;
right: 0;
}
}
.table_panel_wrap {
height: auto!important;
.table_panel {
padding: 0;
min-height: auto;
&.auto-height {
min-height: unset;
}
}
}
.list_tree {
max-height: 400px;
display: flex;
justify-content: space-between;
box-shadow: 0 0 0 1px #d9d9d9;
.list_panel_wrap {
width: 158px;
box-shadow: 1px 0 0 0 #d9d9d9;
}
.tree_panel {
width: calc(100% - 159px);
:deep(.el-tree) {
margin: 0;
height: 100%;
overflow: hidden auto;
}
}
}
.field_list_panel {
width: 100%;
height: calc(100vh - 70px);
position: relative;
.list_item {
display: flex;
font-size: 12px;
color: var(--el-color-regular);
margin: 4px 0;
.item_field {
width: 130px;
color: var(--el-text-color-regular);
}
.item_text {
width: calc(100% - 130px);
word-wrap: break-word;
}
}
.empty_tips {
text-align: center;
color: var(--el-disabled-text-color);
position: absolute;
top: 50px;
left: 50%;
transform: translate(-50%);
}
}
.upload_tool {
margin-bottom: 8px;
position: relative;
.tool_btns {
position: absolute;
top: 0;
right: 0;
}
}
.upload_table_panel_wrap {
.table_panel {
min-height: unset;
}
}
</style>
src/views/data_meta/standard-codetable.vue
......@@ -8,7 +8,7 @@ import { ElMessage, ElMessageBox } from "element-plus";
import { Search } from '@element-plus/icons-vue'
import Tree from '@/components/Tree/index.vue'
import Table from '@/components/Table/index.vue'
import Drawer from '@/components/Drawer/index.vue'
import Drawer from './components/drawer.vue'
import DictFileds from './components/dictFileds.vue'
import useCatchStore from "@/store/modules/catch";
import { download } from '@/utils/common'
......@@ -388,7 +388,7 @@ const formTable = ref({
loading: false
},
tableTool: {
col: 'float-right',
// col: 'float-right',
visible: false,
btns: [
{ label: "新增行", value: "add-row", type: 'primary' },
......
src/views/data_meta/standard.vue
......@@ -434,7 +434,7 @@ const viewGraph = () => {
<div class="aside_wrap">
<div class="aside_title">
元数据标准列表
<el-icon color="#4fa1a4" @click="openStandardDialog">
<el-icon color="#4fa1a4" @click="openStandardDialog" style="width:2em;height:2em">
<CirclePlus />
</el-icon>
</div>
......@@ -482,8 +482,8 @@ const viewGraph = () => {
.standard {
.el-icon {
cursor: pointer;
width: 2em;
height: 2em
width: 1em;
height: 1em
}
.el-icon svg {
width: 20px;
......@@ -524,6 +524,7 @@ const viewGraph = () => {
.tags-list-right {
position: absolute;
right: 0;
top:8px;
}
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!