Source/UBCS-WEB/src/views/integration/integrationIndex.vue

@@ -1,342 +1,629 @@
<template>
    <div>
        <el-container style="height: 100%; border: 1px solid #fff">
            <el-card :style="{ marginRight: '10px' }">
                <el-aside width="300px" style="background-color: #fff">
                    <el-input placeholder="输入关键字进行过滤" v-model="filterText">
                    </el-input>
                    <el-menu :default-openeds="['1', '3']">
                        <el-tree class="filter-tree" :data="treeData" :props="defaultProps" default-expand-all
                            :filter-node-method="filterNode" ref="tree">
                        </el-tree>
                    </el-menu>
                </el-aside>
            </el-card>
            <el-main>
                <el-card>
                    <avue-crud :data="tableData" :option="option" ref="crud" @row-update="addUpdate" @row-save="rowSave"
                        @row-click="handleRowClick">
                        <template slot="menuLeft">
                            <el-button icon="el-icon-plus" size="small" type="primary" @click="dialogPush = true">新 增
                            </el-button>
                            <el-button icon="el-icon-check" size="small" type="primary" @click="handleSave">保 存
                            </el-button>
                            <el-button icon="el-icon-connection" size="small" type="primary" @click="handleSync">同步模型
                            </el-button>
                        </template>
                    </avue-crud>
                    <el-card :style="{ marginTop: '20px' }">
                        <avue-crud :data="tableData" :option="optinos" ref="crud" @row-update="addUpdate"
                            @row-save="rowSave" @row-click="handleRowClick">
                        </avue-crud>
                    </el-card>
                </el-card>
                <el-dialog title="编码属性" :visible.sync="dialogPush" destroy-on-close append-to-body="true" width="30%"
                    :before-close="handleClose">
                    <el-form :model="form">
                        <el-form-item label="查询条件" label-width="70px" size="small">
                            <el-input v-model="form.name" autocomplete="off" @change="handleQuery"></el-input>
                        </el-form-item>
                    </el-form>
                    <p class="text_tip">*选择分类进行属性过滤, 或者输入属性的全拼或者简拼进行查询! 如: 姓名 (可输入xm或xinming )</p>
                    <transfer v-model="transferValue" :data="transferData" :filter-method="filterMethod"
                        filter-placeholder="请输入属性拼音全拼或者拼音缩写" @left-check-change="handelLeftCheck"></transfer>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogPush = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
                    </span>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
  <div>
    <el-container style="height: 100%; border: 1px solid #fff">
      <el-card style="margin-right: 10px;height:  calc(100vh - 125px);overflow: auto">
        <el-aside style="background-color: #fff;" width="210px">
          <el-input v-model="filterText" placeholder="输入关键字进行过滤">
          </el-input>
          <el-menu :default-openeds="['1', '3']">
            <el-tree ref="tree" :data="treeData" :filter-node-method="filterNode" :props="defaultProps"
                     accordion class="filter-tree" empty-text="暂无数据" @node-click="handelTreeCell">
              <template slot-scope="{ node, data }" class="el-tree-node__label">
                <el-tooltip :content="$createElement('div', { domProps: { innerHTML: node.label } })" class="item"
                            effect="dark"
                            open-delay="500"
                            placement="right-start">
                <span style="font-size: 14px;">
                {{ (node || {}).label }}
              </span>
                </el-tooltip>
              </template>
            </el-tree>
          </el-menu>
        </el-aside>
      </el-card>
      <el-main>
        <el-card style="height: calc(100vh - 128px)">
          <el-form :model="form">
            <el-form-item label="集团分类" label-width="80px" size="small">
              <el-select ref="selectTree" v-model="groupVal" clearable placeholder="请选择"
                         popper-class="popperTreeSelect">
                <el-option :disabled="true" :label="groupVal" :value="groupVal">
                  <el-tree ref="groupTree"
                           :data="groupTreeData"
                           :default-checked-keys="defaultCheckedKeys"
                           :default-expanded-keys="defaultCheckedKeys"
                           :props="defaultProps"
                           empty-text="暂无数据"
                           node-key="oid"
                           show-checkbox
                           @check="handleCheck">
                  </el-tree>
                </el-option>
              </el-select>

            </el-form-item>
          </el-form>
          <el-card style="height:38vh">
            <avue-crud ref="crudMapping" :data="mappingData" :option="optionMapping" :table-loading="loading"
                       @select="setCurrentRow" @row-update="handleMapingUpdate"
                       @row-click="handleMapingClick" @row-dblclick="handleMapingRowClick"
                       @selection-change="selectionChange"
                       @select-all="handleSelectAll">
              <template slot="menuLeft">
                <!--                <el-button :disabled="disabledPush" icon="el-icon-plus" size="small" type="primary"-->
                <!--                           @click="dialogPush = true">新 增-->
                <!--                </el-button>-->
                <el-button icon="el-icon-check" size="small" type="primary" @click="handleSave">保 存
                </el-button>
                <el-button icon="el-icon-connection" size="small" type="primary"
                           @click="handleSync('all')">同步主模型
                </el-button>
                <el-button icon="el-icon-connection" size="small" type="primary"
                           @click="handleSync('one')">同步详细模型
                </el-button>
                <el-button icon="el-icon-coordinate" size="small" type="primary"
                           @click="handlerAuto">自动填充
                </el-button>
              </template>
            </avue-crud>
          </el-card>
          <el-card style="margin-top: 10px;height: 38vh">
            <avue-crud ref="crudRange" :data="rangeData" :option="optinoRange" :style="{ marginTop: '-20px'}"
                       @row-update="handleUpdate"
                       @row-dblclick="handleRowClick">
              <template slot="menuLeft">
                <el-button icon="el-icon-coordinate" size="small" type="primary"
                           @click="handlerAuto">自动填充
                </el-button>
              </template>
            </avue-crud>
          </el-card>
        </el-card>
      </el-main>
    </el-container>
    <integration-transfer :data="transferData" :disabledData="filtermapping" :props="transferProps"
                          :visible.sync="dialogPush" @save="handelTransferSave"></integration-transfer>
  </div>
</template>
<script>
import transfer from '@/components/transfer/index'
import integrationTransfer from './integrationTransfer.vue'
import pinyin from 'js-pinyin'
import {
  referCodeClassifyTree,
  referTree,
  gridAttrMapping,
  gridAttrRanges,
  batchAddSave,
  listCodeAttributeByClassId,
  syncClassifyModel
} from '@/api/integration/integration.js'
import {getPage} from "@/api/omd/OmdAttribute";

export default {
    components: {
        transfer
    },
    data() {
        const generateData = () => {
            pinyin.setOptions({ checkPolyphone: false, charCase: 1 });
            const data = [];
            const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
            cities.forEach((city, index) => {
                data.push({
                    label: city,
                    key: index,
                    pinyin: pinyin.getFullChars(city),
                    pinyins: pinyin.getCamelChars(city),
                });
            });
            return data;
        };
        return {
            form: {
                name: '',
            },
            transferData: generateData(),
            transferValue: [],
            dialogPush: false,
            tableData: [
                {
                    id: 1,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                },
                {
                    id: 2,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                },
                {
                    id: 3,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                },
                {
                    id: 3,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                },
                {
                    id: 3,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                },
                {
                    id: 3,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                },
                {
                    id: 3,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                },
                {
                    id: 3,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                },
                {
                    id: 3,
                    groupTypeName: '人员',
                    codeView: '编码视图',
                    sex: '性别',
                    typeName: '螺栓',
                    attributeName: '',
                    defaultValue: '',
                }
            ],
            filterText: '',
            optinos: {
                title: '集团属性',
                maxHeight: '300px',
                menu: true,
                delBtn: false,
                addBtn: false,
                index: true,
                header: false,
                columnBtn: false,
                searchShow: true,
                emptyBtn: false,
                searchBtn: false,
                searchShowBtn: false,
                cellBtn: true,
                border: true,
                searchMenuSpan: 8,
                column: [
                    { label: '属性集团枚举值', prop: 'groupTypeName', minWidth: 80, },
                    { label: '集团属性枚举显示名称', prop: 'codeView', minWidth: 80 },
                    { label: 'MDM枚举值', prop: 'sex', minWidth: 80 },
                    { label: 'MDM枚举显示名称', prop: 'typeName', minWidth: 80, overHidden: true },
                ]
            },
            option: {
                maxHeight: '500px',
                menu: true,
                delBtn: false,
                addBtn: false,
                index: true,
                header: true,
                columnBtn: false,
                searchShow: true,
                emptyBtn: false,
                searchBtn: false,
                searchShowBtn: false,
                cellBtn: true,
                border: true,
                searchMenuSpan: 8,
                column: [
                    {
                        label: '集团分类',
                        prop: 'groupTypeName',
                        minWidth: 80,
                        type: "select",
                        dicUrl: "/api/ubcs-system/dict/dictionary?code=org_category",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        slot: true,
                        search: true,
                        rules: [{
                            message: "请输入集团分类名称"
                        }]
                    },
                    { label: '所属视图', prop: 'codeView', minWidth: 80 },
                    { label: '集团属性', prop: 'sex', minWidth: 80 },
                    { label: '分类名称', prop: 'typeName', minWidth: 80, overHidden: true },
                    { label: '属性名称', prop: 'attributeName', minWidth: 80, cell: true },
                    { label: '默认值', prop: 'defaultValue', minWidth: 140, cell: true },
                ]
            },
            treeData: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    created() {
        pinyin.setOptions({ checkPolyphone: false, charCase: 1 });
        console.log(pinyin.getFullChars('管理员'))
        console.log(pinyin.getCamelChars('管理员'))

    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        handleSave() {

        },
        handlePush() {

        },
        handelLeftCheck(event) {
            console.log(event)
        },
        addUpdate(event, done) {
            console.log(event)
            done()
        },
        rowSave(event, done) {
            console.log(event)
            done()
        },
        handleRowClick(row, event, column) {
            console.log(row)
            console.log(event)
            console.log(column)
        },
        handleQuery(event) {
            console.log(event)
            this.form.name = event
        },
        filterMethod(query, item) {
            return item.pinyins.indexOf(this.form.name) > -1;
        },
  components: {
    integrationTransfer
  },
  name: 'Integration',
  data() {
    const options = {
      menu: false,
      delBtn: false,
      addBtn: false,
      index: true,
      columnBtn: false,
      searchShow: true,
      emptyBtn: false,
      searchBtn: false,
      searchShowBtn: false,
      cellBtn: true,
      border: true,
      searchMenuSpan: 8,
      highlightCurrentRow: true,
    }
    return {
      targetNameList: [], // 元数据返回名称
      defaultCheckedKeys: [],
      isNodeDisabled: true,
      // 表单值
      form: {
        // 集团树显示值
        groupValue: ''
      },
      // 检测新增按钮状态
      disabledPush: true,
      // 表格加载中
      loading: false,
      // 穿梭框数据
      transferData: [],
      // dialog弹窗开关
      dialogPush: false,
      // 属性映射表数据
      mappingData: [],
      // 属性映射取值表数据
      rangeData: [],
      // 主数据树搜索过滤
      filterText: '',
      // 属性映射取值表配置
      optinoRange: {
        title: '属性映射取值范围',
        maxHeight: '280px',
        rowKey: 'oid',
        refreshBtn: false,
        column: [
          {label: '属性集团枚举值', prop: 'numTextValue', minWidth: 80},
          {label: '集团属性枚举显示名称', prop: 'numText', minWidth: 80},
          {
            label: 'CODE枚举值',
            prop: 'targetNumTextValue',
            minWidth: 80,
            cell: true,
            blur: (value) => window.handleBlur(value, 'range')
          },
          {
            label: 'CODE枚举显示名称',
            prop: 'targetNumText',
            minWidth: 80,
            cell: true,
            blur: (value) => window.handleBlur(value, 'range')
          },
        ],
        ...options
      },
      // 属性映射表配置
      optionMapping: {
        maxHeight: '280px',
        header: true,
        rowKey: 'oid',
        selection: false,
        refreshBtn: false,
        delBtn: false,
        addBtn: false,
        index: true,
        columnBtn: false,
        searchShow: true,
        emptyBtn: false,
        searchBtn: false,
        searchShowBtn: false,
        cellBtn: true,
        border: true,
        searchMenuSpan: 8,
        highlightCurrentRow: true,
        $cellEdit: true,
        column: [
          {label: '集团分类', prop: 'sourceClassifyName', minWidth: 80},
          {label: '所属视图', prop: 'viewName', minWidth: 80},
          {label: '集团属性', prop: 'sourceAttrName', minWidth: 80},
          {label: '分类名称', prop: 'targetClassifyName', minWidth: 80},
          {
            label: '属性名称',
            prop: 'targetAttrName',
            type: 'select',
            cell: true,
            filterable: true,
            minWidth: 80,
            props: {
              label: 'targetAttrName',
              value: 'targetAttrName'
            },
            dicData: [],
          },
          // {
          //   label: '默认值',
          //   prop: 'defaultValue',
          //   minWidth: 140,
          //   cell: true,
          //   blur: (value) => window.handleBlur(value, 'mapping')
          // },
        ],
      },
      // 主数据分类树
      treeData: [],
      // 集团分类树
      groupTreeData: [],
      // 树prpos替换值
      defaultProps: {
        children: 'children',
        label: 'name',
        id: 'oid',
        isLeaf: '',
        // disabled:()=>{
        //   return true
        // }
      },
      transferProps: {
        key: 'oid',
        label: 'name'

      },
      // 集团分类树值
      groupVal: '',
      // 左侧树选择的id值
      treeParam: {},
      // 表格选择的行
      rangeForm: {},
      mappingForm: {},
      // 定时器
      times: null,
      TreeSelectOid: ""

    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getReferCodeClassifyTree()
    pinyin.setOptions({checkPolyphone: false, charCase: 1});
  },
  mounted() {
    let that = this
    window.handleBlur = that.handleBlur
  },
  computed: {
    filtermapping() {
      const data = this.mappingData.filter(item => {
        return !(Object.prototype.hasOwnProperty.call(item, 'targetAttrName') && (item.targetAttrName === null || item.targetAttrName === undefined || item.targetAttrName === ""))
      })
      const transfer = data.map(obj => {
        return obj.targetAttrName
      })
      return transfer
    },
    targetColumn() {
      return this.optionMapping.column.find(column => column.prop === 'targetAttrName');
    }
  },
  methods: {
    getTargetName(data) {
      this.targetColumn.dicData = data.filter(item => item.name && item.name.trim() !== "") // 过滤掉name为空的属性
        .map(item => {
          return {
            targetAttrId: item.oid,
            targetAttrKey: item.id,
            targetAttrName: item.name,
            disabled: false
          }
        });
    },
    // 接口左侧树
    async getReferCodeClassifyTree() {
      this.treeData = []
      const param = {
        parentBtmName: "jclass",
        valueField: "oid",
        textField: "name",
        parentFieldName: "id"
      }
      const response = await referCodeClassifyTree(param)
      if (response.status === 200) {
        let data = response.data;
        this.treeData = data.map(item => item.children ? {...item, ...{isLeaf: false}} : {...item, ...{isLeaf: true}})
      }
    },
    // 接口获取属性映射
    async getGridAttrMapping(oid) {
      this.mappingData = []
      this.loading = true
      const response = await gridAttrMapping({sourceClassifyId: oid, ...this.treeParam})
      if (response.status === 200) {
        this.loading = false
        this.mappingData = response.data.data

        for (const item of this.mappingData) {
          if (item.targetAttrName && item.targetAttrId && item.targetAttrKey) {
            const targetObject = this.targetColumn.dicData.find(obj => obj.targetAttrName === item.targetAttrName);
            targetObject.disabled = true;
          }
        }
      }
    },
    // 接口获取属性映射取值范围
    async getGridAttrRanges(oid) {
      this.rangeData = []
      const response = await gridAttrRanges({meatId: oid})
      if (response.status === 200) {
        // console.log(response.data)
        this.rangeData = response.data.data
      }
    },
    // 接口获取主数据分类属性信息
    async getListCodeByClassId(oid) {
      this.transferData = []
      pinyin.setOptions({checkPolyphone: false, charCase: 1});
      const response = await listCodeAttributeByClassId({codeClassifyId: oid})
      if (response.status === 200) {
        const data = response.data.data
        this.transferData = data;
        this.getTargetName(data)
        // console.log(data)
      }
    },
    // 接口获取集团分类树
    async referTree(oid) {
      this.groupTreeData = [];
      const response = await referTree({'conditionMap[codeclsfid]': oid, parentOid: '0'});
      if (response.status === 200) {
        this.groupTreeData = response.data;  // 将获取到的数据赋值给集团分类树数据

        await this.filterCheckedNodes(this.groupTreeData, this.defaultCheckedKeys);
        await this.$nextTick(() => {
          this.$refs.groupTree.setCheckedKeys(this.defaultCheckedKeys);
        });

        this.handlerTreeData(this.groupTreeData);

        this.defaultCheckedKeys = [];
      }
    },
    // 过滤出来checked为true的节点
    filterCheckedNodes(data, checkedNodes) {
      data.forEach(node => {
        if (node.checked) {
          checkedNodes.push(node.oid);
          this.getGridAttrMapping(node.oid);
          this.form.groupValue = node.oid;
          this.groupVal = node.name;
        }

        if (node.children && node.children.length > 0) {
          this.filterCheckedNodes(node.children, checkedNodes);
        }
      });
    },
    // 过滤处理每个节点
    handlerTreeNode(node) {
      // 根据节点禁用状态设置节点是否禁用
      this.$set(node, 'disabled', !node.checked);
      if (node.children && node.children.length > 0) {
        // 递归循环处理所有子节点
        node.children.forEach(child => this.handlerTreeNode(child));
      }
    },
    // 检查所有节点是否都是未禁用状态
    allNodeChecked(data) {
      for (const node of data) {
        // 如果存在禁用节点返回false
        if (node.checked) {
          return false;
        }
        // 如果存在子节点且子节点存在禁用节点，则返回false
        if (node.children && !this.allNodeChecked(node.children)) {
          return false;
        }
      }
      // 没有禁用节点返回true
      return true;
    },
    // 集团分类树禁用数据处理整合方法
    handlerTreeData(data) {
      if (this.allNodeChecked(data)) {
        // 如果所有节点都未禁用将所有节点设置为false
        data.forEach(node => {
          this.$set(node, 'disabled', false); // Vue 3 中可能不需要这样做
        });
        return;
      }
      // 查找禁用节点
      let checkedNode = data.find(node => node.checked);
      data.forEach(node => {
        // 如果节点不是禁用节点设置为true
        this.$set(node, 'disabled', node !== checkedNode);
        if (node.children && node.children.length > 0) {
          // 调用循环节点
          this.handlerTreeNode(node);
        }
      });
    },
    // 左侧树过滤搜索
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 保存按钮
    async handleSave() {
      const getTargetCorresponding = (row) => {
        return this.targetColumn.dicData.find(column => column.targetAttrName === row.targetAttrName);
      }
      for (const item of this.mappingData) {
        item.$cellEdit = false;
        if (item.targetAttrName) {
          const {targetAttrId, targetAttrKey, targetAttrName} = await getTargetCorresponding(item);
          Object.assign(item, {targetAttrId, targetAttrKey, targetAttrName});
        }
      }
      const response = await batchAddSave({dockingPreAttrMappingVOList: this.mappingData})
      if (response.status === 200) {
        this.$message({
          type: "success",
          message: "保存成功!"
        });
      }
    },
    // 同步数据
    async handleSync(type = 'all') {
      let param = {operationType: type}
      if (type === 'one') {
        param.classifyId = this.form.groupValue
      }
      if (this.form.groupValue === '' && type === 'one') {
        this.$message({
          type: "error",
          message: "请选择一条集团分类"
        });
      } else {
        try {
          const response = await syncClassifyModel(param);
          if (response.status === 200) {
            this.$message.success(response.data.msg)
          }
        } catch (error) {
          console.error(error);
        }
      }
    },
    handelTransferSave(event) {
      // console.log(event)
      let that = this
      const transferValue = event.value
      if (Object.keys(that.mappingForm).length == 0) {
        this.$message({
          type: "error",
          message: "请选择一条数据!"
        });
      } else {
        const findRow = that.mappingData.findIndex(item => item.metaListId === that.mappingForm.metaListId)
        that.mappingData[findRow].targetAttrName = transferValue[0].name;
        that.mappingData[findRow].targetAttrId = transferValue[0].oid;
        that.mappingData[findRow].targetAttrKey = transferValue[0].id;
        this.dialogPush = false;
      }

    },
    // 左侧树点击
    handelTreeCell(event) {
      this.treeParam.codeClassifyId = event.oid
      this.form.groupValue = ''
      this.groupVal = ''
      this.tableData = []
      this.mappingData = []
      this.referTree(event.oid)
      this.getListCodeByClassId(event.oid)
    },
    // 集团分类树选择
    handleCheck(data) {
      this.form.groupValue = data.oid
      this.groupVal = data.name
      this.$refs.selectTree.blur()
      this.getGridAttrMapping(data.oid)
    },
    // 集团分类失去焦点
    inputBlur() {
      this.tableColumnIndex = ''
      this.tableRowIndex = null
    },
    // 失去焦点
    handleBlur(value, event) {
      if (event === 'range') this.$refs.crudRange.rowCell(this.rangeForm, this.rangeForm.$index)
      if (event === 'mapping') this.$refs.crudMapping.rowCell(this.mappingForm, this.mappingForm.$index)
    },
    // 集团映射属性行选择单元格编辑（双击）
    handleMapingRowClick(row, column) {
      clearTimeout(this.times)
      this.mappingForm = row
      if (column.label === '默认值' || column.label === '属性名称') this.$refs.crudMapping.rowCell(row, row.$index)
    },
    // 集团映射属性行选择（单击）
    handleMapingClick(row) {
      clearTimeout(this.times)
      this.mappingForm = row
      this.times = setTimeout(() => {
        this.$refs.crudMapping.toggleSelection([row]);
      }, 300)
    },
    // 属性取值范围单元格编辑（双击）
    handleRowClick(row) {
      this.rangeForm = row
      this.$refs.crudRange.rowCell(row, row.$index)
    },
    // 属性取值范围单元格编辑后
    handleUpdate(row, index, done) {
      const findRow = this.mappingData.findIndex(item => item.metaListId === row.metaListId)
      this.rangeData[index] = row
      this.mappingData[findRow].dockingPreAttrRangeVoList = (this.rangeData)
      this.$message({
        showClose: true,
        message: "修改成功",
        type: "success",
      });
      done();
    },
    // 属性取值范围单元格编辑后
    async handleMapingUpdate(row, index, done) {
      const getTargetCorresponding = async (row) => {
        return this.targetColumn.dicData.find(column => column.targetAttrName === row.targetAttrName);
      };

      try {
        if (!row.targetAttrName) {
          this.$message.warning('请选择要保存的属性名称！');
          done();
          return;
        }

        // 获取目标属性信息
        const {targetAttrId, targetAttrKey, targetAttrName} = await getTargetCorresponding(row);

        // 更新行数据
        Object.assign(row, {targetAttrId, targetAttrKey, targetAttrName});

        const response = await batchAddSave({dockingPreAttrMappingVOList: this.mappingData});

        if (response.status === 200) {
          this.$message({
            type: "success",
            message: "修改成功!"
          });
        }
      } catch (error) {
        console.error('处理映射更新时出错：', error);
      } finally {
        done();
      }
    },
    // 集团映射属性选择（单选）
    selectionChange(selection) {
      if (selection.length > 1) {
        const nowVal = selection.shift();
        this.$refs.crudMapping.toggleRowSelection(nowVal, false);
      } else if (selection.length === 1) {
        // 对单选数据的操作写在这里
        this.disabledPush = false
        this.getGridAttrRanges(this.mappingForm.metaListId)
      }
    },
    setCurrentRow(selection, row) {
      this.mappingForm = row
      this.disabledPush = false
    },
    handleSelectAll(selection) {
      this.$refs.crudMapping.toggleSelection()
    }
  }
}
</script>
<style lang="scss" scoped>
.text_tip {
    padding: 10px 0;
    color: #F56C6C;
.setstyle {
  min-height: 200px;
  padding: 0 !important;
  margin: 0;
  overflow: auto;
  cursor: default !important;
}

/deep/ .el-transfer-panel__list {
::v-deep {
  .el-transfer-panel__list {
    width: 100%;
}
    height: 370px;
  }

/deep/ .el-input {
  .el-transfer-panel__body {
    height: 370px;
  }

  .el-input {
    width: auto;
}
  }

/deep/ .el-transfer-panel {
  .el-transfer-panel {
    width: 270px;
  }

  .el-scrollbar__view {
    height: 100px;
  }
}

/deep/ .el-transfer-panel__list {
    height: 370px;
}

/deep/ .el-transfer-panel__body {
    height: 370px;
}
</style>
</style>