airoptweb/src/components/cloudChart/dialog/DomainDialog.vue

<template>
  <SubDialog
    :modelValue="modelValue"
    @update:modelValue="$emit('update:modelValue', $event)"
    title="域"
    width="600"
    height="500px"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <div>
      <el-row style="margin-bottom: 10px;" :gutter="20">
        <el-col :key="showAll" :span="8">
          <el-button @click="showAll" style="width: 100%;">显示全部</el-button>
        </el-col>
        <el-col :key="hideAll" :span="8">
          <el-button @click="hideAll" style="width: 100%;">隐藏全部</el-button>
        </el-col>
        <el-col :key="reverseAll" :span="8">
          <el-button @click="reverseAll" style="width: 100%;">倒转互换</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 10px;" :gutter="20">
        <el-col :span="8">
          <el-button @click="showSelected" style="width: 100%;">显示</el-button>
        </el-col>
        <el-col :span="8">
          <el-button @click="hideSelected" style="width: 100%;">隐藏</el-button>
        </el-col>
        <el-col :span="8">
          <el-button @click="surfaceRendering" style="width: 100%;">表面绘制</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="classtable tabledomain">
      <el-table
        :data="tableData" 
        style="width: 100%; height: 230px" 
        border="true" 
        :header-cell-class-name="headerCellClassName"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="domain" label="域名称" />
        <el-table-column prop="status" label="状态" /> <!-- 直接显示原始值 -->
        <el-table-column prop="drawType" label="绘制类型" />
        <el-table-column prop="planeRange" label="平面范围" />
      </el-table>
    </div>
  </SubDialog>
  <!-- 表面绘制弹窗 -->
  <SurfaceDialog
    v-model="showSurfaceDialog"
    :initial-data="surfaceFormData"
    @surfaceConfirm="handleSurfaceConfirm"
/>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import SubDialog from './SubDialog.vue'
import SurfaceDialog from './SurfaceDialog.vue'

const props = defineProps({
  modelValue: Boolean,
  initialData: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])

const selectedRows = ref([]); // 存储选中的行

// 表面绘制弹窗状态
const showSurfaceDialog = ref(false)
const surfaceFormData = ref({
  slotType: '0',
  start: '1',
  end: '1',
  skip: '1'
})

const selectedDomains = computed(() => {
  return selectedRows.value.map(row => row.domain)
})

// 监听选中行变化
const handleSelectionChange = (rows) => {
  selectedRows.value = rows;
};

// 显示全部
const showAll = () => {
  tableData.value.forEach(item => {
    item.status = 'show'
  })
}

// 隐藏全部
const hideAll = () => {
  tableData.value.forEach(item => {
    item.status = 'hide'
  })
}

// 显示选中行
const showSelected = () => {
  selectedRows.value.forEach(row => {
    row.status = 'show'
  })
}

// 隐藏选中行
const hideSelected = () => {
  selectedRows.value.forEach(row => {
    row.status = 'hide'
  })
}

// 倒转互换所有行状态
const reverseAll = () => {
  tableData.value.forEach(item => {
    item.status = item.status === 'show' ? 'hide' : 'show'
  })
}

// 按钮数据
let domainbtnbox1 = ref(['显示全部','隐藏全部','倒转互换'])
let domainbtnbox2 = ref(['显示','隐藏','表面绘制'])

// 表格数据
let tableData = ref([
  {domain:"Z1", status:'show', drawType:'Exposed', planeRange:'(1,1,1)'},
  {domain:"Z2", status:'show', drawType:'Exposed', planeRange:'(1,1,1)'},
  {domain:"Z3", status:'show', drawType:'Exposed', planeRange:'(1,1,1)'},
  {domain:"Z4", status:'show', drawType:'Exposed', planeRange:'(1,1,1)'},
  {domain:"Z1", status:'show', drawType:'Exposed', planeRange:'(1,1,1)'},
  {domain:"Z2", status:'show', drawType:'Exposed', planeRange:'(1,1,1)'},
  {domain:"Z3", status:'show', drawType:'Exposed', planeRange:'(1,1,1)'},
  {domain:"Z4", status:'show', drawType:'Exposed', planeRange:'(1,1,1)'},
])

// 表格列配置
let tabledomainColumns = ref([
  {label:"状态", prop:'state'},
  {label:"绘制类型", prop:'type'},
  {label:"平面范围", prop:'area'},
])

const slotTypeOptions = ref([
  { value: "0", label: "Exposed" },
  { value: "1", label: "I-plans" },
  { value: "2", label: "J-plans" },
  { value: "3", label: "K-plans" }
])

// 表头样式
const headerCellClassName = ({ column }) => {
  // console.log('列：',column.property)
  if (column.property === 'state') {
    console.log('yanse',column.property)
    return 'header-blue';
  } else if (column.property === 'type') {
    return 'header-green';
  } else if (column.property === 'area') {
    return 'header-yellow';
  }
  return '';
};

// 表面绘制按钮点击
const surfaceRendering = () => {
  if (selectedRows.value.length === 0) {
    return
  } 
  
  // 初始化表面绘制表单数据
  surfaceFormData.value = {
    slotType: '0',
    start: '1',
    end: '1',
    skip: '1',
    domains: selectedDomains.value // 传递选中的域
  }
  
  showSurfaceDialog.value = true
}

// 表面绘制确认
const handleSurfaceConfirm = (surfaceData) => {
  console.log('表面绘制数据:', surfaceData)
  // 找到对应的label
  const selectedOption = slotTypeOptions.value.find(option => option.value === surfaceData.slotType);
  const drawTypeLabel = selectedOption ? selectedOption.label : surfaceData.slotType;
  
  // 更新选中行的绘制类型和平面范围
  selectedRows.value.forEach(row => {
    row.drawType = drawTypeLabel;  // 使用label而不是value
    row.planeRange = `(${surfaceData.start},${surfaceData.end},${surfaceData.skip})`
  })
  
  showSurfaceDialog.value = false
}

// 确认操作
const handleConfirm = () => {
  emit('confirm', tableData.value)
  emit('update:modelValue', false)
}

// 取消操作
const handleCancel = () => {
  emit('cancel')
  emit('update:modelValue', false)
}
</script>

<style scoped>
.classtable.tabledomain {
  margin-top: 20px;
}
/* 表头样式 */
:deep(.header-cell) {
  background-color: #f5f7fa;
  font-weight: bold;
}
</style>