for_client/src/views/cross/cross-add.vue

<template>
    <hc-new-dialog 
        v-model="editModal" 
        is-table 
        :title="editModalTitle" 
        widths="85rem" 
        :loading="confirmLoad" 
        @close="closeModal" 
        @save="confirmLink"
    >
        <el-form 
            ref="formRef" 
            :model="formData"
            :disabled="formDisabled"
        >
            <!-- 测量者信息 -->
            <div class="section-title">
                <!-- 左侧蓝色圆点标识 -->
                <div class="title-dot" />
                <!-- 标题文本 -->
                <div class="title-text">测量者信息</div>
            </div>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="隧道名称" prop="channelName">
                        <el-input v-model="formData.channelName" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="测量时间" prop="date">
                        <el-date-picker
                            v-model="formData.date"
                            style="width: 100%;"
                            type="date"
                            placeholder="请选择"
                            value-format="YYYY-MM-DD HH:mm:ss"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="测量者" prop="userName">
                        <el-input v-model="formData.userName" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 基础数据 -->
            <div class="section-title">
                <!-- 左侧蓝色圆点标识 -->
                <div class="title-dot" />
                <!-- 标题文本 -->
                <div class="title-text">基础数据</div>
            </div>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="仪器高度" prop="deviceHeight">
                        <ElInput v-model="formData.deviceHeight" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="方向偏移量(X)" prop="x0">
                        <ElInput v-model="formData.x0" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="方向偏移量(Y)" prop="z0">
                        <ElInput v-model="formData.z0" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 标准断面 -->
            <div class="section-title">
                <!-- 左侧蓝色圆点标识 -->
                <div class="title-dot" />
                <!-- 标题文本 -->
                <div class="title-text">标准断面</div>
            </div>
            <el-row v-for="(eleItem, eleIndex) in formData.sectionBeans" :key="eleIndex" :gutter="20">
                <el-col :span="4">
                    <el-form-item label="方向" prop="direction">
                        <!-- <ElInput v-model="eleItem.direction" placeholder="请输入" /> -->
                        <el-select 
                            v-model="eleItem.direction" 
                            size="small" 
                            style="width: 100%"
                        >
                            <el-option label="顺时针" value="true" />
                            <el-option label="逆时针" value="false" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="起角" prop="startAngle">
                        <ElInput v-model="eleItem.startAngle" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="终角" prop="endAngle">
                        <ElInput v-model="eleItem.endAngle" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="半径" prop="radius">
                        <ElInput v-model="eleItem.radius" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="圆心(X)" prop="x">
                        <ElInput v-model="eleItem.x" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="圆心(Z)" prop="y">
                        <ElInput v-model="eleItem.y" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 测量点数组 -->
            <div class="section-title">
                <!-- 左侧蓝色圆点标识 -->
                <div class="title-dot" />
                <!-- 标题文本 -->
                <div class="title-text">测量点数组</div>
            </div>
        
            <HcTable is-new :column="tableColumn" :datas="formData.data">
                <template #angle="{ row }">
                    <el-input v-model="row.angle" size="small" />
                </template>
                <template #dist="{ row }">
                    <el-input v-model="row.dist" size="small" />
                </template>
                <template #x="{ row }">
                    <el-input v-model="row.x" size="small" />
                </template>
                <template #z="{ row }">
                    <el-input v-model="row.z" size="small" />
                </template>
                <template #backBreak="{ row }">
                    <el-input v-model="row.backBreak" size="small" />
                </template>
            </HcTable>
        </el-form>
    </hc-new-dialog>
</template>

<script setup>
import { defineModel, onMounted, ref, watch } from 'vue'
import { getObjValue } from 'js-fast-way'
import { getDictionaryData } from '~uti/tools'
import crossApi from '~api/cross/cross'

const props = defineProps({
    formDisabled: {
        type: Boolean,
        default: false,
    },
    rowId: {
        type: String,
        default: '',
    },

 
})
const emit = defineEmits(['save'])
const formDisabled = ref(props.formDisabled)
const rowId = ref(props.rowId)
// 双向绑定弹窗显示状态
const editModal = defineModel('modelValue', {
  default: false,
})
const editModalTitle = ref('编辑')

watch(() => props.formDisabled, (val) => {
   
  formDisabled.value = val
  editModalTitle.value = val ? '查看详情' : '编辑'
})
watch(() => props.rowId, (val) => {
  rowId.value = val
  if (val) {
  
    getOneDetail(val)
  }
})
const tasksStatus = ref([
   
])
const getTasksStatusOptions = async () => {
    tasksStatus.value = await getDictionaryData('q_profiler_back_break', true)

    tasksStatus.value.forEach(item => {
        item.value = String(item.value) 

    })
    

    
}
// 监听弹窗显示状态，每次打开时加载选项
watch(editModal, (newVal) => {
  if (newVal) { // 当弹窗被打开时
    // getTasksStatusOptions()
  }
})
const getOneDetail = async (id)=>{
    confirmLoad.value = true
        const { error, code, data } = await crossApi.getOne({
       id,

    })
    //判断状态
    confirmLoad.value = false
    if (!error && code === 200) {
        console.log(data, '详情')
        formData.value = getObjValue(data)
        const { sectionBeans } = data
        if (sectionBeans.length === 0) {
            formData.value.sectionBeans = [{}]
        }
        
    } else {
      formData.value = {}
       
    }

}
// 表单引用
const formRef = ref(null)
// 加载状态
const confirmLoad = ref(false)

// 表单数据结构
const formData = ref({
  channelName: '',
  date: '',
  userName: '',
  deviceHeight: '',
  x0: '',
  z0: '',
  direction: '',
  startAngle: '',
  endAngle: '',
  radius: '',
  x: '',
  z: '',
  data: [


  ],
})
const tableColumn = [
    { key: 'angle', name: '测点角度' },
    { key: 'dist', name: '距离' },
    { key: 'x', name: 'X坐标' },
    { key: 'z', name: 'Y坐标' },
    { key: 'backBreak', name: '超/欠挖值' },
   
]
// 添加新的测量点


// 关闭弹窗
const closeModal = () => {
  editModal.value = false
}

// 确认提交
const confirmLink = async () => {
  // 表单验证
  if (formRef.value) {
    const valid = await formRef.value.validate()
    if (!valid) return
  }


  confirmLoad.value = true
  
  // 检查sectionBeans是否为[{}]
  if (formData.value.sectionBeans && formData.value.sectionBeans.length === 1 && Object.keys(formData.value.sectionBeans[0]).length === 0) {
    formData.value.sectionBeans = []
  }

  const { error, code, msg } = await crossApi.edit(formData.value)
  //判断状态
  confirmLoad.value = false
  if (!error && code === 200) {
    window.$message.success('保存成功')
    closeModal()
    emit('save')
  }

}
</script>

<style lang="scss" scoped>
.section-title {
  display: flex;
  align-items: center;
  /* 可根据需要调整整体边距 */
  margin: 15px 0;
}

.title-dot {
  width: 8px;
  height: 20px;
  border-radius: 20px;
  background-color:var(--el-color-primary); /* Element UI主题蓝 */
  margin-right: 8px; /* 圆点与文字间距 */
}

.title-text {
  font-size: 16px;
  font-weight: 500;
  color: #333; /* 标题文字颜色 */
  /* 可根据实际设计调整字体样式 */
}
</style>