表格行内编辑增删改查以及拖拽式分割面板组件封装
资源内容介绍
表格行内编辑增删改查以及拖拽式分割面板组件封装 <template> <div class="tree_table"> <KyySplitPane> <template v-slot:left> <div class="splitpane_left"> <div class="hosp-tree"> <div class="hosp-tree-title flex_between"> <div>流程节点</div> </div> <div class="hosp-tree-content"> <div class="tree_main_content"> <el-tree :expand-on-click-node="false" :indent="24" default-expand-all class="filter-tree" :data="treeData" :node-key="nodeKey" :props="defaultProps" ref="tree" @node-click="handleNodeClick" :current-node-key="currentNodekey" :highlight-current="true" v-loading="treeLoading"> <div class="hosp-tree-node" slot-scope="{ node }"> <span :title="node.label">{{ node.label }}</span> </div> </el-tree> </div> </div> </div> </div> </template> <template v-slot:right> <div class="splitpane_right"> <div class="single-table-container"> <div class="search-form-wrapper"> <div class="title">转换配置</div> <div class="seach_list"> <el-button type="primary" size="mini" @click="addConfig">添加</el-button> </div> </div> <div class="single-table"> <el-table ref="table" v-loading="tableLoading" size="mini" height="100%" :data="tableData" stripe tooltip-effect="dark" :header-cell-style="{ background: '#f5f7fa', fontWeight: 'bold', color: '#303133' }" :highlight-current-row="true" border> <el-table-column type="index" header-align="center" align="center" label="序号" width="50"></el-table-column> <el-table-column prop="fieldName" label="字段名称" show-overflow-tooltip> <template slot-scope="scope"> <el-input v-if="scope.row.isEdit" class="config-text" v-model="curEdit.fieldName" placeholder="请输入" size="mini" clearable></el-input> <span class="config-text-span" v-else> {{ scope.row.fieldName }} </span> </template> </el-table-column> <el-table-column prop="mappingRefType" label="映射关系类型" show-overflow-tooltip> <template slot-scope="scope"> <span class="config-text-span" v-if="scope.row.isEdit">{{ !!curEdit.mappingRefType ? fieldFomatter(curEdit.mappingRefType, mappingRefTypeOptionsObj) : '-' }}</span> <span class="config-text-span" v-else>{{ !!scope.row.mappingRefType ? fieldFomatter(scope.row.mappingRefType, mappingRefTypeOptionsObj) : '-' }}</span> </template> </el-table-column> <el-table-column width="220" prop="mappingRefName" label="映射关系名称"> <template slot-scope="scope"> <el-select v-if="scope.row.isEdit" value-key="mappingCatalogId" v-model='curEdit.mappingRefName' placeholder='请选择' filterable clearable @change="(val) => change(val, curEdit)"> <el-option v-for="item in selectTreeData" :value='item' :key="item.mappingCatalogId" :label='item.mappingCatalogName'></el-option> </el-select> <span class="config-text-span" v-if="!scope.row.isEdit"> {{ scope.row.mappingRefName }} </span> </template> </el-table-column> <el-table-column width="220" prop="filedConfig" label="字段配置" show-overflow-tooltip> <template slot-scope="scope"> <el-input class="config-text" v-if="scope.row.isEdit" v-model="curEdit.filedConfig" placeholder="请输入" size="mini" clearable></el-input> <span class="config-text-span" v-else> {{ scope.row.filedConfig }} </span> </template> </el-table-column> <el-table-column label="操作" show-overflow-tooltip> <template slot-scope="scope"> <el-button type="text" @click="modifyConfig(scope.row, scope.$index, false)">{{scope.row.isEdit ? "保存" : "修改"}}</el-button> <el-button v-if="!scope.row.isEdit" class="btn2" type="text" @click="deleteConfig(scope.row)">删除</el-button> <el-button v-else type="text" @click="modifyConfig(scope.row, scope.$index, true)"> 取消</el-button> </template> </el-table-column> </el-table> </div> <div class="table-pagination"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="pages.pageIndex" :page-sizes="pages.pageSizeList" :page-size="pages.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pages.total"></el-pagination> </div> </div> </div> </template> </KyySplitPane> </div> </template> <script> // definePageMeta({ // title: '数据转换配置', // keepalive: true // }) // import { // getDataTransferConfigTree, // getMappingCatalogList, // deleteMappingRef, // getPageTransformInfo, // saveOrUpdate // } from '#runtime/plugins/preset-hosp-chs-core-front/api/dataTransferConfig' // import { guid } from '@/utils/index' import KyySplitPane from "./components/kyy-split-pane/index.vue"; export default { name: 'chs-base-data-transfer-config', components: { KyySplitPane }, data() { return { treeLoading: false, currentNodekey: null, nodeKey: 'id', defaultProps: { children: 'child', label: 'className' }, treeData: [], selectLoading: false, selectTreeData: [], tableLoading: false, tableData: [], mappingRefTypeOptionsObj: { 1: '业务代码转卫健标准', 2: '卫健标准转医保标准', 3: '业务代码转医保标准' }, curEdit: null, pages: { pageIndex: 1, pageSize: 20, pageSizeList: [10, 20, 30, 50, 100], total: 0 }, } }, created() { // this.initTree() // this.getMappingCatalogList() }, methods: { // 初始化树 initTree() { this.treeLoading = true setTimeout(() => { this.treeLoading = false }, 5000) // getDataTransferConfigTree().then((res) => { // if (res.code == 200) { // this.treeData = res.result // if (this.treeData.length > 0) { // this.$nextTick(() => { // this.currentNodekey = this.treeData[0].id // this.$refs.tree.setCurrentKey(this.currentNodekey) // this.initTable() // }) // } // this.treeLoading = false // } else { // this.treeData = [] // this.tableData = [] // } // }) }, //切换树节点 handleNodeClick(data, node) { this.$nextTick(() => { this.currentNodekey = data.id this.$refs.tree.setCurrentKey(this.currentNodekey) this.initTable() }) }, // 表格数据 initTable() { this.tableLoading = true setTimeout(() => { this.tableLoading = false }, 5000) let params = { classId: this.currentNodekey, current: this.pages.pageIndex, size: this.pages.pageSize