|
@@ -0,0 +1,150 @@
|
|
|
+<template>
|
|
|
+ <div class="page-container">
|
|
|
+ <div class="page-side">
|
|
|
+ <el-scrollbar style="height:100%;padding:5px;box-sizing: border-box;">
|
|
|
+ <el-tree :data="treeNodes" :props="treeNodeProps" :highlight-current="true" class="tree" @node-click="nodeClickHandle">
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span class="custom-tree-node">
|
|
|
+ <template v-if="node.isLeaf">
|
|
|
+ <el-icon><Tools/></el-icon><span style="margin-left:2px;">{{ node.label }}</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <span v-else>{{ node.label }}</span>
|
|
|
+
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ <div class="page-split"></div>
|
|
|
+ <div class="page-main">
|
|
|
+ <el-form :model="formModel" label-position="right" label-width="auto" :inline="false" :rules="rules" :inline-message="true">
|
|
|
+ <el-form-item label="上级编码名">
|
|
|
+ <el-input v-model="formModel.fatherCodeName" autocomplete="off" class="edit-form-item" :readonly="true"/>
|
|
|
+ <el-button type="primary" plain size="default">清除</el-button>
|
|
|
+ <span class="footnote">(为空表示顶级)</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="编码">
|
|
|
+ <el-input v-model="formModel.codeId" autocomplete="off" class="edit-form-item" :readonly="true"/>
|
|
|
+ <span class="footnote">(系统自动生成)</span>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item label="编码名" prop="codeName">
|
|
|
+ <el-input v-model="formModel.codeName" autocomplete="off" placeholder="请输入编码名" class="edit-form-item" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="显示序号">
|
|
|
+ <el-input v-model="formModel.displayNum" autocomplete="off" class="edit-form-item" clearable/>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="助记码">
|
|
|
+ <el-input v-model="formModel.assistCode" autocomplete="off" class="edit-form-item" :readonly="true"/>
|
|
|
+ <span class="footnote">(系统自动生成)</span>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="备注1">
|
|
|
+ <el-input v-model="formModel.spare1" autocomplete="off" class="edit-form-item" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="备注2">
|
|
|
+ <el-input v-model="formModel.spare2" autocomplete="off" class="edit-form-item" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="备注3">
|
|
|
+ <el-input v-model="formModel.spare3" autocomplete="off" class="edit-form-item" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="备注4">
|
|
|
+ <el-input v-model="formModel.spare4" autocomplete="off" class="edit-form-item" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item label=" ">
|
|
|
+ <el-button type="primary">保存</el-button>
|
|
|
+ <el-button type="success">新增</el-button>
|
|
|
+ <el-button>删除</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import {ref,reactive} from 'vue'
|
|
|
+ import { fetchData} from "../../api/sidetree.js"
|
|
|
+
|
|
|
+ const treeNodes = ref([])
|
|
|
+
|
|
|
+ const treeNodeProps = {
|
|
|
+ children: 'children',
|
|
|
+ label: 'label',
|
|
|
+ isLeaf:'leaf'
|
|
|
+ }
|
|
|
+
|
|
|
+ const formModel = reactive({
|
|
|
+ fatherCodeName:null,
|
|
|
+ codeId: '',
|
|
|
+ codeName:'',
|
|
|
+ displayNum:'',
|
|
|
+ assistCode:'',
|
|
|
+ spare1:null,
|
|
|
+ spare2:null,
|
|
|
+ spare3:null,
|
|
|
+ spare4:null
|
|
|
+ })
|
|
|
+
|
|
|
+ const nodeClickHandle=()=>{
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ const getData = () => {
|
|
|
+ fetchData({}).then((res) => {
|
|
|
+ treeNodes.value=res
|
|
|
+ });
|
|
|
+ };
|
|
|
+ getData();
|
|
|
+
|
|
|
+ const rules =reactive({
|
|
|
+ codeName:[
|
|
|
+ {required:true,message:'编码名还未填写',trigger:'blur'},
|
|
|
+ { min: 3, max: 20, message: '编码名长度应该为3-20', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .page-container{
|
|
|
+ padding: 5px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: row nowrap;
|
|
|
+ }
|
|
|
+ .page-side{
|
|
|
+ width:240px;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .page-split{
|
|
|
+ width:5px;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ }
|
|
|
+ .page-main{
|
|
|
+ flex:1;
|
|
|
+ padding:0 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form--inline.el-form--label-top{
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .edit-form-item{
|
|
|
+ width:350px;
|
|
|
+ }
|
|
|
+ .footnote{
|
|
|
+ font-size:12px;
|
|
|
+ color:#999;
|
|
|
+ }
|
|
|
+</style>
|