|
|
@@ -3,233 +3,266 @@ meta:
|
|
|
enabled: false
|
|
|
</route>
|
|
|
|
|
|
-<script lang="ts" setup name="daasObjectEdit">
|
|
|
-import Sortable from 'sortablejs'
|
|
|
-import type { FormInstance, FormRules } from 'element-plus'
|
|
|
-import { ElMessage } from 'element-plus'
|
|
|
-import { createObject, getObjectById, updateObject } from '@/api/model/objectApi'
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+import Model from './components/Model.vue'
|
|
|
+import ModelObject from './components/ModelObject.vue'
|
|
|
+import { deleteModelById, getModelByList } from '@/api/model/modelApi'
|
|
|
+import { deleteObjectById, getObjectByList } from '@/api/model/modelObjectApi'
|
|
|
import useSettingsStore from '@/store/modules/settings'
|
|
|
|
|
|
const settingsStore = useSettingsStore()
|
|
|
-const route = useRoute()
|
|
|
-const modelId = parseInt(route.params.modelId.toString())
|
|
|
-const objectId = parseInt(route.params.objectId.toString())
|
|
|
const router = useRouter()
|
|
|
const tabbar = useTabbar()
|
|
|
|
|
|
-interface ObjectAttr {
|
|
|
- attrId: number
|
|
|
- attrTitle: string
|
|
|
- attrCode: string
|
|
|
- attrType: number
|
|
|
- attrLength: number
|
|
|
- attrDecimals: number
|
|
|
- isNotNull: number
|
|
|
- isFixed: number
|
|
|
- comment: string
|
|
|
- isPKey: number
|
|
|
- sortNo: number
|
|
|
+interface TreeNode {
|
|
|
+ label: string
|
|
|
+ isLeaf: boolean
|
|
|
+ modelId: number
|
|
|
+ children?: TreeNode[]
|
|
|
}
|
|
|
|
|
|
-const dataType = [
|
|
|
- { dataType: 1, dataName: '整数' },
|
|
|
- { dataType: 2, dataName: '字符串' },
|
|
|
- { dataType: 3, dataName: '小数' }]
|
|
|
+interface Object {
|
|
|
+ modelId: number
|
|
|
+ objectId: number
|
|
|
+ objectTitle: string
|
|
|
+ objectCode: string
|
|
|
+ comment: string
|
|
|
+}
|
|
|
|
|
|
-// 数据
|
|
|
const state = reactive({
|
|
|
- title: '',
|
|
|
- dialogVisible: false,
|
|
|
loading: false,
|
|
|
+ keywords: '',
|
|
|
+ treeData: [] as TreeNode[],
|
|
|
+ curModelId: 0,
|
|
|
+ objectList: [] as Object[],
|
|
|
+ dialogState: 1,
|
|
|
search: {
|
|
|
keywords: '',
|
|
|
},
|
|
|
- formData: {
|
|
|
- modelId,
|
|
|
- objectId,
|
|
|
- objectType: 1,
|
|
|
- objectCode: '',
|
|
|
- objectTitle: '',
|
|
|
- comment: '',
|
|
|
- attrs: [] as ObjectAttr[],
|
|
|
- },
|
|
|
- actionType: 1,
|
|
|
})
|
|
|
|
|
|
-const formRef = ref<FormInstance>()
|
|
|
-const formRules = reactive<FormRules>({
|
|
|
- objectTitle: [
|
|
|
- { required: true, message: '请输入对象标题', trigger: 'blur' },
|
|
|
- ],
|
|
|
- objectType: [
|
|
|
- { required: true, message: '请输入对象类型', trigger: 'blur' },
|
|
|
- ],
|
|
|
- objectCode: [
|
|
|
- { required: true, message: '请输入对像代码', trigger: 'blur' },
|
|
|
- ],
|
|
|
- comment: [
|
|
|
- { required: false, message: '请输入简要描述', trigger: 'blur' },
|
|
|
- ],
|
|
|
+const leftTreeRef = ref()
|
|
|
+const modelRef = ref()
|
|
|
+const getObjectData = async () => {
|
|
|
+ const curModelId = state.curModelId
|
|
|
+ if (curModelId > 0) {
|
|
|
+ state.loading = true
|
|
|
+ const { data } = await getObjectByList({ modelId: curModelId })
|
|
|
+ state.objectList = data
|
|
|
+ state.loading = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const getModelData = async () => {
|
|
|
+ const { data } = await getModelByList('')
|
|
|
+ const children: TreeNode[] = []
|
|
|
+ data.forEach((item: any) => {
|
|
|
+ return children.push({
|
|
|
+ label: item.modelTitle,
|
|
|
+ modelId: item.modelId,
|
|
|
+ isLeaf: true,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ state.treeData = [
|
|
|
+ {
|
|
|
+ label: '模型库',
|
|
|
+ isLeaf: false,
|
|
|
+ modelId: -1,
|
|
|
+ children,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ if (data && data.length > 0) {
|
|
|
+ state.curModelId = data[0].modelId
|
|
|
+ nextTick(() => {
|
|
|
+ leftTreeRef.value.setCurrentKey(data[0].modelId)
|
|
|
+ })
|
|
|
+ await getObjectData()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getModelData()
|
|
|
})
|
|
|
|
|
|
-// 查询数据
|
|
|
-const getData = async () => {
|
|
|
- state.loading = true
|
|
|
- const { data } = await getObjectById(modelId, objectId)
|
|
|
- state.loading = false
|
|
|
- state.formData = data
|
|
|
+// 模型新增
|
|
|
+const onModelAdd = () => {
|
|
|
+ modelRef.value.showAddModel()
|
|
|
}
|
|
|
|
|
|
-const attrsTableRef = ref()
|
|
|
-const attrsTableKey = ref(0)
|
|
|
-function onAttrAdd() {
|
|
|
- state.formData.attrs.push({
|
|
|
- attrId: 0,
|
|
|
- attrTitle: '', // 名称
|
|
|
- attrCode: '', // 代码
|
|
|
- attrType: 0, // 类型
|
|
|
- attrLength: 0, // 长度
|
|
|
- attrDecimals: 0, // 小数位数
|
|
|
- isNotNull: 0, // 是否为空
|
|
|
- isFixed: 0, // 是否锁定
|
|
|
- isPKey: 0, // 主键
|
|
|
- comment: '', // 注释
|
|
|
- sortNo: 0,
|
|
|
- })
|
|
|
- nextTick(() => {
|
|
|
- attrsTableRef.value.setScrollTop(state.formData.attrs.length * 50)
|
|
|
+// 模型编辑
|
|
|
+const onModelEdit = (data: { modelId: number }) => {
|
|
|
+ const modelId = data.modelId
|
|
|
+ modelRef.value.showEditModel(modelId)
|
|
|
+}
|
|
|
+
|
|
|
+// 模型删除
|
|
|
+const onModelDelete = (data: any) => {
|
|
|
+ ElMessageBox.confirm(`确认删除「${data.modelTitle}」吗?`, '确认信息').then(async () => {
|
|
|
+ await deleteModelById(data.modelId)
|
|
|
+ await getModelData()
|
|
|
+ ElMessage.success({
|
|
|
+ message: '删除成功',
|
|
|
+ center: true,
|
|
|
+ })
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-// 删除属性
|
|
|
-function onAttrDelete(index: number) {
|
|
|
- state.formData.attrs.splice(index, 1)
|
|
|
+// 模型选择
|
|
|
+const onTreeNodeClick = (node: TreeNode) => {
|
|
|
+ if (node.isLeaf) {
|
|
|
+ state.curModelId = node.modelId
|
|
|
+ getObjectData()
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-function onAttrDrag() {
|
|
|
- const tbody = attrsTableRef.value.$el.querySelector('.el-table__body-wrapper tbody')
|
|
|
- Sortable.create(tbody, {
|
|
|
- handle: '.sortable',
|
|
|
- animation: 300,
|
|
|
- ghostClass: 'ghost',
|
|
|
- onEnd: ({ newIndex, oldIndex }) => {
|
|
|
- if (newIndex === undefined || oldIndex === undefined) {
|
|
|
- return
|
|
|
- }
|
|
|
- const currRow = state.formData.attrs.splice(oldIndex, 1)[0]
|
|
|
- state.formData.attrs.splice(newIndex, 0, currRow)
|
|
|
- attrsTableKey.value += 1
|
|
|
- nextTick(() => onAttrDrag())
|
|
|
- },
|
|
|
- })
|
|
|
+const objectTableRef = ref()
|
|
|
+const objectRef = ref()
|
|
|
+
|
|
|
+// 检索对象
|
|
|
+const onSearch = () => {
|
|
|
+ getObjectData()
|
|
|
}
|
|
|
|
|
|
-onMounted(() => {
|
|
|
- if (objectId <= 0) {
|
|
|
- state.title = '新增对象'
|
|
|
- state.actionType = 1
|
|
|
+// 新增对象
|
|
|
+const onObjectAdd = () => {
|
|
|
+ if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
|
|
|
+ tabbar.open({
|
|
|
+ name: 'modelObjectEdit',
|
|
|
+ params: {
|
|
|
+ modelId: state.curModelId,
|
|
|
+ objectId: 0,
|
|
|
+ },
|
|
|
+ })
|
|
|
}
|
|
|
else {
|
|
|
- state.title = '编辑对象'
|
|
|
- state.actionType = 2
|
|
|
- getData()
|
|
|
+ router.push({
|
|
|
+ name: 'modelObjectEdit',
|
|
|
+ params: {
|
|
|
+ modelId: state.curModelId,
|
|
|
+ objectId: 0,
|
|
|
+ },
|
|
|
+ })
|
|
|
}
|
|
|
-
|
|
|
- nextTick(() => {
|
|
|
- onAttrDrag()
|
|
|
- })
|
|
|
-})
|
|
|
-
|
|
|
-// 保存
|
|
|
-function onSubmit() {
|
|
|
- formRef.value && formRef.value.validate(async (valid) => {
|
|
|
- if (valid) {
|
|
|
- state.formData.attrs.forEach((item, index) => item.sortNo = index)
|
|
|
- if (state.actionType === 1) {
|
|
|
- await createObject(state.formData)
|
|
|
- state.dialogVisible = false
|
|
|
- ElMessage.success('新增成功')
|
|
|
- }
|
|
|
- else {
|
|
|
- await updateObject(state.formData)
|
|
|
- state.dialogVisible = false
|
|
|
- ElMessage.success('修改成功')
|
|
|
- }
|
|
|
- goBack()
|
|
|
- }
|
|
|
- })
|
|
|
}
|
|
|
|
|
|
-function onCancel() {
|
|
|
- goBack()
|
|
|
+// 编辑对象
|
|
|
+const onObjectEdit = (row: { modelId: any; objectId: any }) => {
|
|
|
+ if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
|
|
|
+ tabbar.open({
|
|
|
+ name: 'modelObjectEdit',
|
|
|
+ params: {
|
|
|
+ modelId: row.modelId,
|
|
|
+ objectId: row.objectId,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ router.push({
|
|
|
+ name: 'modelObjectEdit',
|
|
|
+ params: {
|
|
|
+ modelId: row.modelId,
|
|
|
+ objectId: row.objectId,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-// 返回列表页
|
|
|
-function goBack() {
|
|
|
+const onObjectOAM = (row: any) => {
|
|
|
if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
|
|
|
- tabbar.close({ name: 'model' })
|
|
|
+ tabbar.open({
|
|
|
+ name: 'modelObjectOAM',
|
|
|
+ params: {
|
|
|
+ modelId: row.modelId,
|
|
|
+ objectId: row.objectId,
|
|
|
+ },
|
|
|
+ })
|
|
|
}
|
|
|
else {
|
|
|
- router.push({ name: 'model' })
|
|
|
+ router.push({
|
|
|
+ name: 'modelObjectOAM',
|
|
|
+ params: {
|
|
|
+ modelId: row.modelId,
|
|
|
+ objectId: row.objectId,
|
|
|
+ },
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+// 删除对象
|
|
|
+const onObjectDelete = (row: any) => {
|
|
|
+ const { modelId, objectId, objectTitle } = row
|
|
|
+ ElMessageBox.confirm(`确认删除「${objectTitle}」吗?`, '确认信息').then(async () => {
|
|
|
+ await deleteObjectById(modelId, objectId)
|
|
|
+ await getObjectData()
|
|
|
+ ElMessage.success({
|
|
|
+ message: '删除成功',
|
|
|
+ center: true,
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="absolute-container">
|
|
|
- <page-header title="对象" content="创建元数据对象。">
|
|
|
- <el-button size="default" round @click="goBack">
|
|
|
- <template #icon>
|
|
|
- <el-icon>
|
|
|
- <svg-icon name="i-ep:arrow-left" />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- 返回
|
|
|
- </el-button>
|
|
|
- </page-header>
|
|
|
-
|
|
|
+ <tool-header title="数据模型">
|
|
|
+ <template #right>
|
|
|
+ <el-button plain @click="onModelAdd">
|
|
|
+ <template #icon>
|
|
|
+ <el-icon>
|
|
|
+ <svg-icon name="i-ep:plus" />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ 新增模型
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </tool-header>
|
|
|
<div class="page-main">
|
|
|
- <LayoutContainer hide-left-side-toggle>
|
|
|
+ <LayoutContainer left-side-width="300px" hide-left-side-toggle>
|
|
|
<template #leftSide>
|
|
|
- <h2>基本信息</h2>
|
|
|
- <el-scrollbar class="form-el-scrollbar">
|
|
|
- <div class="form-content">
|
|
|
- <el-form ref="formRef" :model="state.formData" :rules="formRules" label-position="top">
|
|
|
- <el-form-item label="对象名称" prop="objectTitle">
|
|
|
- <el-input v-model="state.formData.objectTitle" placeholder="请输入标题" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="类型" prop="objectType">
|
|
|
- <el-radio-group v-model="state.formData.objectType">
|
|
|
- <el-radio :label="1">
|
|
|
- 实体对象
|
|
|
- </el-radio>
|
|
|
- <el-radio :label="2">
|
|
|
- 视图对象
|
|
|
- </el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="对象代码" prop="objectCode">
|
|
|
- <el-input v-model="state.formData.objectCode" placeholder="请输入代码" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="简要说明" prop="comment">
|
|
|
- <el-input v-model="state.formData.comment" type="textarea" rows="10" placeholder="请输入标题" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
+ <el-scrollbar class="tree">
|
|
|
+ <ElTree ref="leftTreeRef" :data="state.treeData" default-expand-all node-key="modelId" @node-click="onTreeNodeClick">
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <div class="custom-tree-node">
|
|
|
+ <div class="label" :title="node.label">
|
|
|
+ <el-icon v-if="data.isLeaf" size="16px" style="margin-right: 5px;">
|
|
|
+ <svg-icon name="uim:box" />
|
|
|
+ </el-icon>
|
|
|
+ <div class="text">
|
|
|
+ {{ data.label }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="data.isLeaf" class="actions">
|
|
|
+ <el-button-group>
|
|
|
+ <el-button type="info" plain size="small" @click.stop="onModelEdit(data)">
|
|
|
+ <template #icon>
|
|
|
+ <el-icon>
|
|
|
+ <svg-icon name="i-ep:edit" />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <el-button type="danger" plain size="small" @click.stop="onModelDelete(data)">
|
|
|
+ <template #icon>
|
|
|
+ <el-icon>
|
|
|
+ <svg-icon name="i-ep:delete" />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ElTree>
|
|
|
</el-scrollbar>
|
|
|
</template>
|
|
|
|
|
|
<div class="container">
|
|
|
<tool-bar>
|
|
|
- <template #left>
|
|
|
- <h2>属性</h2>
|
|
|
- </template>
|
|
|
<template #right>
|
|
|
- <el-input v-model="state.search.keywords" placeholder="请输入关键词筛选字典项" clearable style="width: 200px;" />
|
|
|
- <el-button style="margin-left:10px" @click="getData">
|
|
|
+ <el-input v-model="state.search.keywords" placeholder="请输入名称,支持模糊查询" style="padding-right: 10px;" clearable />
|
|
|
+ <el-button type="primary" @click="onSearch">
|
|
|
<template #icon>
|
|
|
<el-icon>
|
|
|
<svg-icon name="i-ep:search" />
|
|
|
@@ -237,172 +270,125 @@ function goBack() {
|
|
|
</template>
|
|
|
</el-button>
|
|
|
|
|
|
- <el-button type="primary" @click="onAttrAdd">
|
|
|
+ <el-button plain size="default" @click.stop="onObjectAdd">
|
|
|
<template #icon>
|
|
|
<el-icon>
|
|
|
<svg-icon name="i-ep:plus" />
|
|
|
</el-icon>
|
|
|
</template>
|
|
|
+ 新增对象
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</tool-bar>
|
|
|
|
|
|
- <el-table ref="attrsTableRef" :key="attrsTableKey" :data="state.formData.attrs" class="list-table" border stripe highlight-current-row>
|
|
|
- <el-table-column width="60" align="center" fixed>
|
|
|
- <template #header>
|
|
|
- <el-button type="primary" size="small" plain circle @click="onAttrAdd">
|
|
|
- <template #icon>
|
|
|
- <el-icon>
|
|
|
- <svg-icon name="i-ep:plus" />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
+ <el-table ref="objectTableRef" v-loading="state.loading" class="list-table" :data="state.objectList" border stripe highlight-current-row height="100%">
|
|
|
+ <el-table-column type="index" label="序号" header-align="center" align="center" width="70" />
|
|
|
|
|
|
- <template #default="scope">
|
|
|
- <span class="index">{{ scope.$index + 1 }}</span>
|
|
|
- <el-button type="danger" size="small" plain circle class="delete" @click="onAttrDelete(scope.$index)">
|
|
|
- <template #icon>
|
|
|
- <el-icon>
|
|
|
- <svg-icon name="i-ep:delete" />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <el-table-column prop="objectTitle" label="名称" header-align="center" align="center" width="200" />
|
|
|
|
|
|
- <el-table-column label="名称" width="150">
|
|
|
- <template #default="scope">
|
|
|
- <el-input v-model="scope.row.attrTitle" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column label="代码" width="120">
|
|
|
- <template #default="scope">
|
|
|
- <el-input v-model="scope.row.attrCode" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column label="类型" width="120">
|
|
|
- <template #default="scope">
|
|
|
- <el-select v-model="scope.row.attrType">
|
|
|
- <el-option
|
|
|
- v-for="item in dataType"
|
|
|
- :key="item.dataType"
|
|
|
- :value="item.dataType"
|
|
|
- :label="item.dataName"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column label="长度" width="90">
|
|
|
- <template #default="scope">
|
|
|
- <el-input v-model="scope.row.attrLength" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column label="小数位数" width="90">
|
|
|
- <template #default="scope">
|
|
|
- <el-input v-model="scope.row.attrDecimals" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <el-table-column prop="objectCode" label="代码" header-align="center" align="center" width="150" />
|
|
|
|
|
|
- <el-table-column label="是否为空" width="90">
|
|
|
+ <el-table-column prop="objectType" label="类型" header-align="center" align="center" width="150">
|
|
|
<template #default="scope">
|
|
|
- <el-checkbox v-model="scope.row.isNotNull" :true-label="1" :false-label="0">
|
|
|
- {{ scope.row.isNotNull === 1 ? '是' : '否' }}
|
|
|
- </el-checkbox>
|
|
|
+ <span v-if="scope.row.objectType === 1">实体对象</span>
|
|
|
+ <span v-else>视图对象</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column label="主键" width="70">
|
|
|
- <template #default="scope">
|
|
|
- <el-checkbox v-model="scope.row.isPKey" :true-label="1" :false-label="0">
|
|
|
- {{ scope.row.isPKey === 1 ? '是' : '否' }}
|
|
|
- </el-checkbox>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <el-table-column prop="comment" label="说明" header-align="center" align="left" />
|
|
|
|
|
|
- <el-table-column label="注释">
|
|
|
+ <el-table-column label="操作" header-align="center" align="center" width="230">
|
|
|
<template #default="scope">
|
|
|
- <el-input v-model="scope.row.comment" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column width="80" align="center">
|
|
|
- <template #header>
|
|
|
- 排序
|
|
|
- </template>
|
|
|
- <template #default>
|
|
|
- <el-tag type="info" class="sortable">
|
|
|
- <el-icon>
|
|
|
- <svg-icon name="i-ep:d-caret" />
|
|
|
- </el-icon>
|
|
|
- </el-tag>
|
|
|
+ <el-button type="primary" size="small" plain @click="onObjectOAM(scope.row)">行为</el-button>
|
|
|
+ <el-button type="warning" size="small" plain @click="onObjectEdit(scope.row)">编辑</el-button>
|
|
|
+ <el-button type="danger" size="small" plain @click="onObjectDelete(scope.row)">删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</LayoutContainer>
|
|
|
</div>
|
|
|
-
|
|
|
- <fixed-action-bar>
|
|
|
- <el-button type="primary" size="large" @click="onSubmit">
|
|
|
- 保存
|
|
|
- </el-button>
|
|
|
- <el-button size="large" @click="onCancel">
|
|
|
- 取消
|
|
|
- </el-button>
|
|
|
- </fixed-action-bar>
|
|
|
+ <Model ref="modelRef" @success="getModelData" />
|
|
|
+ <ModelObject ref="objectRef" @success="getObjectData" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.page-header {
|
|
|
- margin-bottom: 0;
|
|
|
+.container {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
|
|
|
-.page-main {
|
|
|
+.absolute-container {
|
|
|
:deep(.left-side) {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
height: 100%;
|
|
|
- .form-el-scrollbar{
|
|
|
- flex: 1;
|
|
|
+
|
|
|
+ .btns {
|
|
|
+ display: inline-flex;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: var(--container-padding);
|
|
|
+
|
|
|
+ .add {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- :deep(.el-table) {
|
|
|
- height: 100%;
|
|
|
|
|
|
- .el-table__row {
|
|
|
- .index {
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
+ .tree {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
- .delete {
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ .el-tree {
|
|
|
+ .el-tree-node__content {
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
|
|
|
- &:hover {
|
|
|
- .index {
|
|
|
- display: none;
|
|
|
+ .is-current > .el-tree-node__content {
|
|
|
+ background-color: var(--el-color-primary-light-9);
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-tree-node {
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ width: 0;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ width: calc(100% - 10px);
|
|
|
+ color: var(--el-text-color-primary);
|
|
|
+
|
|
|
+ .text {
|
|
|
+ @include text-overflow;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .delete {
|
|
|
- display: inline-block;
|
|
|
+ &:hover {
|
|
|
+ .actions {
|
|
|
+ display: block;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .el-tag.sortable,
|
|
|
- .el-tag.sortable .el-icon {
|
|
|
- cursor: s-resize;
|
|
|
+ .actions {
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ padding: 5px 8px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- h2{
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|