|
|
@@ -1,140 +1,307 @@
|
|
|
<template>
|
|
|
<div style="width: 100%;background-color: #F7F7F7;padding-top: 1%;display: flex;" :style="{'height':heightAll+'px'}">
|
|
|
- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" style="margin-left: 1%;background-color: #F7F7F7;" default-expand-all/>
|
|
|
- <el-table
|
|
|
+ <div style="width: 10%;;">
|
|
|
+ <Plus style="width: 1em; height: 1em; margin-left:90%;cursor: pointer;color: #337ecc;" @click="showAddTree"/>
|
|
|
+ <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" style="margin-left: 1%;background-color: #F7F7F7;width: 100%;" default-expand-all>
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span class="custom-tree-node">
|
|
|
+ <span>{{ node.label }}</span>
|
|
|
+ <span>
|
|
|
+ <el-button type="primary" @click="editTree(node, data)" text size="mini" style="margin-left: 15%;">编辑</el-button>
|
|
|
+ <el-button type="danger" @click="delTree(node, data)" text size="mini" style="margin-left: -17%;">删除</el-button>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ <div style="width: 87%;">
|
|
|
+ <el-button type="primary" @click="showAdd" size="mini" style="margin-left: 98.5%;">新增</el-button>
|
|
|
+ <el-table
|
|
|
:data="tableData"
|
|
|
- style="width: 91%;margin-left: 2%;margin-top: 0.5%;"
|
|
|
+ style="width: 100%;margin-left: 2%;margin-top: 0.5%;"
|
|
|
:cell-style="{ textAlign: 'center', }"
|
|
|
:header-cell-style="{ textAlign: 'center'}"
|
|
|
:row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center' }"
|
|
|
border
|
|
|
- :max-height="tableheight">
|
|
|
+ :height="tableheight">
|
|
|
<el-table-column type="index" label="序号" width="80"></el-table-column>
|
|
|
- <el-table-column prop="name" label="字段名称:">
|
|
|
-
|
|
|
+ <el-table-column prop="itemName" label="字段名称:">
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="className" label="英文名称" width="160"/>
|
|
|
- <el-table-column prop="mdUnit" label="字段数据项类型" width="160"/>
|
|
|
- <el-table-column prop="registrant" label="字段数据类型" width="160"/>
|
|
|
- <el-table-column prop="status" label="默认值" width="140">
|
|
|
+ <el-table-column prop="itemEn" label="英文名称" width="160"/>
|
|
|
+ <el-table-column prop="itemTp" label="字段数据项类型" width="160"/>
|
|
|
+ <el-table-column prop="itemDataTp" label="字段数据类型" width="160"/>
|
|
|
+ <el-table-column prop="itemDefaultVal" label="默认值" width="140">
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="st1" label="单位" width="140">
|
|
|
+ <el-table-column prop="itemUnit" label="单位" width="140">
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="modifyBy" label="备注" width="170"/>
|
|
|
- <el-table-column prop="address" label="操作" width="300">
|
|
|
+ <el-table-column prop="itemNotes" label="备注" width="170"/>
|
|
|
+ <el-table-column prop="address" label="操作" width="222">
|
|
|
<template #default="scope">
|
|
|
- <div style="display: flex;justify-content: space-between;width: 80%;">
|
|
|
- <el-button type="primary" @click="showEdit(scope.row)" size="mini" text style="margin-left: 5%;">编辑</el-button>
|
|
|
+ <div style="display: flex;justify-content: space-between;width: 100%;">
|
|
|
+ <el-button type="primary" @click="showEdit(scope.row)" size="mini" text style="margin-left: 1%;">编辑</el-button>
|
|
|
<!-- <el-button type="danger" text size="mini" style="margin-left: -5%;" @click="handleDelete(scope.row)">注销</el-button> -->
|
|
|
<el-button @click="showDe(scope.row)" type="primary" text size="mini" style="margin-left: 1%;">查看</el-button>
|
|
|
- <el-button type="primary" text size="mini" style="margin-left: 1%;">删除</el-button>
|
|
|
+ <el-button @click="delRow(scope.row)" type="danger" text size="mini" style="margin-left: 1%;">删除</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
+ <div style="float: right;margin-top: 1%;margin-right: 1%;">
|
|
|
+ <el-pagination
|
|
|
+ small
|
|
|
+ v-model='currentPage'
|
|
|
+ @current-change="changePage"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="total"
|
|
|
+ class="mt-4"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <el-dialog v-model="dialogVisible" title="" width="30%" @close="clearForm" destroy-on-close :key="tableKey">
|
|
|
+ <el-dialog :title="title" @close="clearForm" v-model="dialogVisible" title="" width="30%" destroy-on-close :key="tableKey">
|
|
|
<el-form :disabled="isEdit" style="margin-left: 5%;margin-top: 2%;" :model="formZu" class="demo-form-inline" ref="formRefZu" :rules="rulesZu">
|
|
|
- <el-form-item label="字段名称:" prop="mirrorImageEurl" style="margin-left: -2%;">
|
|
|
- <el-input v-model="formZu.mirrorImageEurl" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ <el-form-item label="字段名称:" prop="itemName" style="margin-left: -2%;">
|
|
|
+ <el-input v-model="formZu.itemName" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="英文名称:" prop="itemEn" style="margin-left: -2%;">
|
|
|
+ <el-input v-model="formZu.itemEn" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="字段数据项类型:" prop="itemTp" style="margin-left: -2%;">
|
|
|
+ <el-input v-model="formZu.itemTp" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="英文名称:" prop="mirrorImageEurl" style="margin-left: -2%;">
|
|
|
- <el-input v-model="formZu.mirrorImageEurl" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ <el-form-item label="字段数据类型:" prop="itemDataTp" style="margin-left: -2%;">
|
|
|
+ <el-input v-model="formZu.itemDataTp" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="字段数据项类型:" prop="mirrorImageEurl" style="margin-left: -2%;">
|
|
|
- <el-input v-model="formZu.mirrorImageEurl" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ <el-form-item label="默认值:" prop="itemDefaultVal" style="margin-left: -2%;">
|
|
|
+ <el-input v-model="formZu.itemDefaultVal" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="字段数据类型:" prop="mirrorImageEurl" style="margin-left: -2%;">
|
|
|
- <el-input v-model="formZu.mirrorImageEurl" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ <el-form-item label="单位:" prop="itemUnit">
|
|
|
+ <el-input v-model="formZu.itemUnit" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注:" prop="itemNotes">
|
|
|
+ <el-input v-model="formZu.itemNotes" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button size="mini" @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button v-if="isAddTa" type="primary" @click="addTa" size="mini">
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
+ <el-button v-if="!isAddTa" type="primary" @click="saveEditTa" size="mini">
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog @close="clearFromTree" :title="titleTree" v-model="dialogVisibleTree" title="" width="30%" destroy-on-close :key="tableKey">
|
|
|
+ <el-form style="margin-left: 5%;margin-top: 2%;" :model="formTree" class="demo-form-inline" ref="formRefTree" :rules="rulesTree">
|
|
|
+ <el-form-item label="名称:" prop="itemName" style="margin-left: -2%;">
|
|
|
+ <el-input v-model="formTree.itemName" style="width: 75%;" placeholder=""/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="默认值:" prop="">
|
|
|
- <el-input v-model="formZu.mirrorImageEurl" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ <el-form-item label="父节点id:" prop="catePid" style="margin-left: -2%;">
|
|
|
+ <el-input v-model="formTree.catePid" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="单位:" prop="">
|
|
|
- <el-input v-model="formZu.mirrorImageEurl" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ <el-form-item label="排序:" prop="itemNo" style="margin-left: -2%;">
|
|
|
+ <el-input v-model="formTree.itemNo" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="备注:" prop="">
|
|
|
- <el-input v-model="formZu.mirrorImageEurl" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ <el-form-item label="备注:" prop="itemNotes" style=" ">
|
|
|
+ <el-input v-model="formTree.itemNotes" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button size="mini" @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button v-if="isAdd" type="primary" @click="addTree" size="mini">
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
+ <el-button v-if="!isAdd" type="primary" @click="saveEditTree" size="mini">
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import { reactive } from 'vue'
|
|
|
-const data = [
|
|
|
- {
|
|
|
- label: 'Level one 1',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: 'Level two 1-1',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: 'Level three 1-1-1',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- label: 'Level one 2',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: 'Level two 2-1',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: 'Level three 2-1-1',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- label: 'Level two 2-2',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: 'Level three 2-2-1',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- label: 'Level one 3',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: 'Level two 3-1',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: 'Level three 3-1-1',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- label: 'Level two 3-2',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: 'Level three 3-2-1',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
-]
|
|
|
-const tableData = [
|
|
|
- {name:'1'}
|
|
|
-]
|
|
|
+import { addDataCate,getCateTree,getCateDe,editCate,delCate,addDataItem,getItem,getItemDe,editItem,delItem} from "@/api/service/cate";
|
|
|
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const data = ref([])
|
|
|
+const title = ref([])
|
|
|
+const titleTree = ref([])
|
|
|
+const currentPage = ref(1)
|
|
|
+const total = ref(1)
|
|
|
+const tableData = ref([])
|
|
|
+const tableheight = window.innerHeight*0.7
|
|
|
const heightAll = window.innerHeight
|
|
|
-const dialogVisible = ref(true)
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const dialogVisibleTree = ref(false)
|
|
|
+const isAdd = ref(false)
|
|
|
+const isAddTa = ref(false)
|
|
|
+const treeId = ref('');
|
|
|
|
|
|
const formZu = ref({
|
|
|
- mirrorImageEurl:'',
|
|
|
- mdCPU:'',
|
|
|
- mdGPU:''
|
|
|
+ itemName:'',
|
|
|
+ itemTp:'',
|
|
|
+ itemEn:'',
|
|
|
+ itemTp:'',
|
|
|
+ itemDataTp:'',
|
|
|
+ itemDefaultVal:'',
|
|
|
+ itemUnit:'',
|
|
|
+ itemNotes:'',
|
|
|
});
|
|
|
const rulesZu = reactive({
|
|
|
- mirrorImageEurl: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
- mdCPU: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ itemName: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ itemEn: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ itemTp: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ itemDataTp: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ itemDefaultVal: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
});
|
|
|
const formRefZu = ref();
|
|
|
|
|
|
+const formTree = ref({
|
|
|
+ itemName:'',
|
|
|
+ catePid:'',
|
|
|
+ itemNo:'',
|
|
|
+ itemNotes:''
|
|
|
+});
|
|
|
+const rulesTree = reactive({
|
|
|
+ itemNo: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ catePid: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ itemName: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+});
|
|
|
+const formRefTree = ref();
|
|
|
+
|
|
|
+function clearForm(){
|
|
|
+ formZu.value = {
|
|
|
+ itemName:'',
|
|
|
+ itemTp:'',
|
|
|
+ itemEn:'',
|
|
|
+ itemTp:'',
|
|
|
+ itemDataTp:'',
|
|
|
+ itemDefaultVal:'',
|
|
|
+ itemUnit:'',
|
|
|
+ itemNotes:'',
|
|
|
+ }
|
|
|
+}
|
|
|
+function getTable(){
|
|
|
+ var par = {
|
|
|
+ pageNum:currentPage.value,
|
|
|
+ pageSize:15,
|
|
|
+ cateId:''
|
|
|
+ }
|
|
|
+ getItem(par).then(res=>{
|
|
|
+ tableData.value = res.rows
|
|
|
+ total.value = res.total
|
|
|
+ })
|
|
|
+}
|
|
|
+function showAdd(){
|
|
|
+ isAddTa.value = true
|
|
|
+ title.value = '新增'
|
|
|
+ dialogVisible.value = true
|
|
|
+}
|
|
|
+function showEdit(row){
|
|
|
+ isAddTa.value = false
|
|
|
+ title.value = '编辑'
|
|
|
+ dialogVisible.value = true
|
|
|
+ getItemDe(row.dataId).then(res=>{
|
|
|
+ formZu.value = res.data
|
|
|
+ })
|
|
|
+}
|
|
|
+function showAddTree(){
|
|
|
+ isAdd.value = true
|
|
|
+ titleTree.value = '新增节点'
|
|
|
+ dialogVisibleTree.value = true
|
|
|
+}
|
|
|
+function clearFromTree(){
|
|
|
+ formTree.value = {
|
|
|
+ itemName:'',
|
|
|
+ catePid:'',
|
|
|
+ itemNo:'',
|
|
|
+ itemNotes:''
|
|
|
+ }
|
|
|
+}
|
|
|
+function getTree(){
|
|
|
+ getCateTree().then(res=>{
|
|
|
+ data.value = res.data
|
|
|
+ })
|
|
|
+}
|
|
|
+function addTa(){
|
|
|
+ formRefZu.value.validate(async (valid) => {
|
|
|
+ await addDataItem(formZu.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("新增成功");
|
|
|
+ getTable()
|
|
|
+ dialogVisible.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+}
|
|
|
+function saveEditTa(){
|
|
|
+ editItem(formZu.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("修改成功");
|
|
|
+ dialogVisible.value = false
|
|
|
+ getTable()
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+function delRow(row) {
|
|
|
+ proxy.$modal.confirm('是否确认删除?').then(function () {
|
|
|
+ return delItem(row.dataId);
|
|
|
+ }).then(() => {
|
|
|
+ getTable();
|
|
|
+ proxy.$modal.msgSuccess("删除成功");
|
|
|
+ }).catch(() => {});
|
|
|
+};
|
|
|
+async function addTree(){
|
|
|
+ formRefTree.value.validate(async (valid) => {
|
|
|
+ await addDataCate(formTree.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("新增成功");
|
|
|
+ getTree()
|
|
|
+ dialogVisibleTree.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+}
|
|
|
+function saveEditTree(){
|
|
|
+ editCate(formTree.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("修改成功");
|
|
|
+ dialogVisibleTree.value = false
|
|
|
+ getTree()
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+function handleNodeClick(node, data){
|
|
|
+ treeId.value = data.id
|
|
|
+ getTable()
|
|
|
+}
|
|
|
+function delTree(node, data) {
|
|
|
+ proxy.$modal.confirm('是否确认删除?').then(function () {
|
|
|
+ return delCate(data.id);
|
|
|
+ }).then(() => {
|
|
|
+ getTree();
|
|
|
+ proxy.$modal.msgSuccess("删除成功");
|
|
|
+ }).catch(() => {});
|
|
|
+};
|
|
|
+function editTree(node, data){
|
|
|
+ console.log(data)
|
|
|
+ titleTree.value = '编辑'
|
|
|
+ isAdd.value = false
|
|
|
+ dialogVisibleTree.value = true
|
|
|
+ getCateDe(data.id).then(res=>{
|
|
|
+ formTree.value = res.data
|
|
|
+ })
|
|
|
+ console.log(node, data)
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ getTree()
|
|
|
+ getTable()
|
|
|
+});
|
|
|
|
|
|
</script>
|
|
|
<style scoped>
|