TBA_GXPT/ruoyi-ui/src/views/service/data/index.vue

<template>
  <div style="width: 100%;background-color: #F7F7F7;padding-top: 1%;display: flex;" :style="{'height':heightAll+'px'}">
    <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: 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 
        :height="tableheight">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="itemName" label="字段名称:">
        </el-table-column>
        <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="itemUnit" label="单位" width="140">
        </el-table-column>
        <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: 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 @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 :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="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="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="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="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="父节点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="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="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'
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(false)
const dialogVisibleTree = ref(false)
const isAdd = ref(false)
const isAddTa = ref(false)
const treeId = ref('');

const formZu = ref({
  itemName:'',
  itemTp:'',
  itemEn:'',
  itemTp:'',
  itemDataTp:'',
  itemDefaultVal:'',
  itemUnit:'',
  itemNotes:'',
});
const rulesZu = reactive({
  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>

.drag-handle {
  cursor: move;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

/* 防止文字选中 */
:deep(.el-table__row) {
  user-select: none;
  -webkit-user-select: none;
}
</style>
<style scoped lang="scss">


.el-table .el-table__row td {
  height: 60px !important; /* 行高 */
}
.custom-tree-node {
  display: flex;       /* 启用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 8px;            /* 图标与文字间距 */
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>