看板大屏2修改页面

huang

2025-04-17 3a0087aa5e3eed5d9d7a793a17dc01fd1d6df80c

 UI-Project/src/views/KanbanData/kanbanData.vue

@@ -8,6 +8,7 @@
  loadYieldData()
  loadUtilizationData()
  loadQuantityData()
  loadPlannedData()
})

// 关闭页面停止定时器
@@ -68,8 +69,8 @@
// 在制量
const locationOptions = [
  { label: '半成品', value: '半成品' },
  { label: '7014库位', value: '7014库位' },
  { label: '7016库位', value: '7016库位' }
  { label: '7014', value: '7014' },
  { label: '7016', value: '7016' }
]

// 在制量数据
@@ -80,6 +81,15 @@
})
const quantityData = ref([])
const quantityLoading = ref(false)

// 计划产量数据
const plannedFormData = ref({
  recordDate: new Date().toISOString().slice(0, 10),
  type: '',
  value: null
})
const plannedData = ref([])
const plannedLoading = ref(false)

// 日期格式化
const formatDate = (dateStr) => {
@@ -94,9 +104,8 @@
const checkExists = (date, code, data, excludeId = null) => {
  return data.some(item => {
    const itemDate = item.recordTime ? formatDate(item.recordTime) : item.recordDate;
    return itemDate === date && 
      (item.lineNo === code || item.locationCode === code) && 
      (!excludeId || item.id !== excludeId);
    const codeMatch = item.lineNo === code || item.locationCode === code || item.type === code;
    return itemDate === date && codeMatch && (!excludeId || item.id !== excludeId);
  });
}

@@ -182,6 +191,34 @@
    console.error(error)
  } finally {
    quantityLoading.value = false
  }
}

// 加载计划产量数据
const loadPlannedData = async () => {
  plannedLoading.value = true
  try {
    const res = await request({
      url: '/deviceInteraction/plannedAmount/listPlanned',
      method: 'post',
      data: { page: 1, pageSize: 50 }
    })
    if (res.code === 200 && res.data?.records) {
      plannedData.value = res.data.records.map(item => {
        const formattedDate = item.recordTime ? formatDate(item.recordTime) : '';
        return {
          ...item,
          recordDate: formattedDate,
          editing: false,
          originalData: { ...item, recordDate: formattedDate }
        };
      });
    }
  } catch (error) {
    ElMessage.error('计划产量数据加载失败')
    console.error(error)
  } finally {
    plannedLoading.value = false
  }
}

@@ -284,10 +321,44 @@
  }
}

// 提交计划产量表单
const handlePlannedSubmit = async () => {
  if (!plannedFormData.value.recordDate || !plannedFormData.value.type || plannedFormData.value.value === null) {
    ElMessage.error('请填写完整信息')
    return
  }

  // 检查是否存在相同日期和类型的记录
  if (checkExists(plannedFormData.value.recordDate, plannedFormData.value.type, plannedData.value)) {
    ElMessage.error('该日期和类型的记录已存在')
    return
  }

  try {
    const recordTimeStr = `${plannedFormData.value.recordDate} 00:00:00`;
    
    await request({
      url: '/deviceInteraction/plannedAmount/addPlanned',
      method: 'post',
      data: {
        type: plannedFormData.value.type,
        value: plannedFormData.value.value,
        recordTime: recordTimeStr
      }
    })
    ElMessage.success('添加成功')
    resetPlannedForm()
    loadPlannedData()
  } catch (error) {
    ElMessage.error('添加失败')
    console.error(error)
  }
}

// 重置表单
const resetYieldForm = () => {
  yieldFormData.value = {
    recordDate: new Date().toISOString().slice(0, 10),
    recordDate: yieldFormData.value.recordDate, // 保持当前选择的日期
    lineNo: '',
    yieldvalue: null
  }
@@ -295,7 +366,7 @@

const resetUtilizationForm = () => {
  utilizationFormData.value = {
    recordDate: new Date().toISOString().slice(0, 10),
    recordDate: utilizationFormData.value.recordDate, // 保持当前选择的日期
    lineNo: '',
    utilizationRate: null
  }
@@ -303,7 +374,7 @@

const resetQuantityForm = () => {
  quantityFormData.value = {
    recordDate: new Date().toISOString().slice(0, 10),
    recordDate: quantityFormData.value.recordDate, // 保持当前选择的日期
    locationCode: '',
    quantity: null
  }
@@ -427,6 +498,56 @@
  }
}

// 编辑计划产量
const handlePlannedEdit = async (index, row) => {
  if (!row.editing) {
    row.editing = true
    return
  }

  if (!row.recordDate || !row.type || row.value === null) {
    ElMessage.error('请填写完整信息')
    return
  }

  // 检查是否存在相同日期和类型的记录（排除当前记录）
  if (checkExists(row.recordDate, row.type, plannedData.value, row.id)) {
    ElMessage.error('该日期和类型的记录已存在')
    return
  }

  try {
    const recordTimeStr = `${row.recordDate} 00:00:00`;
    
    await request({
      url: '/deviceInteraction/plannedAmount/updatePlanned',
      method: 'post',
      data: {
        id: row.id,
        type: row.type,
        value: row.value,
        recordTime: recordTimeStr
      }
    })
    row.editing = false
    row.originalData = { ...row }
    ElMessage.success('修改成功')
    loadPlannedData()
  } catch (error) {
    ElMessage.error('修改失败')
    console.error(error)
  }
}

// 重置计划产量表单
const resetPlannedForm = () => {
  plannedFormData.value = {
    recordDate: plannedFormData.value.recordDate,
    type: '',
    value: null
  }
}

// 取消编辑
const cancelEdit = (row) => {
  Object.assign(row, row.originalData)
@@ -459,6 +580,12 @@
        method: 'post',
        data: { id: id }
      })
    } else if (type === 'planned') {
      await request({
        url: '/deviceInteraction/plannedAmount/deletePlanned',
        method: 'post',
        data: { id: id }
      })
    }
    
    ElMessage.success('删除成功')
@@ -467,6 +594,7 @@
    if (type === 'yieldvalue') loadYieldData()
    else if (type === 'utilization') loadUtilizationData()
    else if (type === 'quantity') loadQuantityData()
    else if (type === 'planned') loadPlannedData()
    
  } catch (error) {
    if (error !== 'cancel') {
@@ -598,8 +726,8 @@
            </el-form-item>
            <el-form-item label="生产线">
              <el-select v-model="utilizationFormData.lineNo" placeholder="选择生产线" style="width: 180px">
                <el-option label="一线" value="一线" />
                <el-option label="二线" value="二线" />
                <el-option label="标准" value="标准" />
                <el-option label="定制" value="定制" />
              </el-select>
            </el-form-item>
            <el-form-item label="利用率">
@@ -635,8 +763,8 @@
            <el-table-column prop="lineNo" label="生产线" width="180">
              <template #default="scope">
                <el-select v-if="scope.row.editing" v-model="scope.row.lineNo" style="width: 140px">
                  <el-option label="一线" value="一线" />
                  <el-option label="二线" value="二线" />
                  <el-option label="标准" value="标准" />
                  <el-option label="定制" value="定制" />
                </el-select>
                <span v-else>{{ scope.row.lineNo }}</span>
              </template>
@@ -702,8 +830,8 @@
            <el-form-item label="类型">
              <el-select v-model="quantityFormData.locationCode" placeholder="选择类型" style="width: 180px">
                <el-option label="半成品" value="半成品" />
                <el-option label="7014库位" value="7014库位" />
                <el-option label="7016库位" value="7016库位" />
                <el-option label="7014" value="7014" />
                <el-option label="7016" value="7016" />
              </el-select>
            </el-form-item>
            <el-form-item label="数量">
@@ -739,13 +867,13 @@
              <template #default="scope">
                <el-select v-if="scope.row.editing" v-model="scope.row.locationCode" style="width: 140px">
                  <el-option label="半成品" value="半成品" />
                  <el-option label="7014库位" value="7014库位" />
                  <el-option label="7016库位" value="7016库位" />
                  <el-option label="7014" value="7014" />
                  <el-option label="7016" value="7016" />
                </el-select>
                <span v-else>
                  {{ 
                    scope.row.locationCode === '半成品' ? '半成品' : 
                    scope.row.locationCode === '7014库位' ? '7014库位' : '7016库位'
                    scope.row.locationCode === '7014' ? '7014' : '7016'
                  }}
                </span>
              </template>
@@ -794,6 +922,107 @@
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 计划产量标签页 -->
        <el-tab-pane label="计划产量" name="planned">
          <el-form :inline="true" :model="plannedFormData" label-width="100px" class="form-container">
            <el-form-item label="日期">
              <el-date-picker
                v-model="plannedFormData.recordDate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="选择日期"
                style="width: 180px"
              />
            </el-form-item>
            <el-form-item label="类型">
              <el-select v-model="plannedFormData.type" placeholder="选择类型" style="width: 180px">
                <el-option label="平方" value="平方" />
                <el-option label="片数" value="片数" />
              </el-select>
            </el-form-item>
            <el-form-item label="数值">
              <el-input-number
                v-model="plannedFormData.value"
                :precision="plannedFormData.type === '平方' ? 2 : 0"
                :step="plannedFormData.type === '平方' ? 0.01 : 1"
                :min="0"
                controls-position="right"
                style="width: 180px"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handlePlannedSubmit">提交</el-button>
              <el-button @click="resetPlannedForm">重置</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="plannedData" v-loading="plannedLoading" style="width: 100%">
            <el-table-column prop="recordDate" label="日期" width="180">
              <template #default="scope">
                <el-date-picker
                  v-if="scope.row.editing"
                  v-model="scope.row.recordDate"
                  type="date"
                  value-format="YYYY-MM-DD"
                  style="width: 140px"
                />
                <span v-else>{{ scope.row.recordDate }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="180">
              <template #default="scope">
                <el-select v-if="scope.row.editing" v-model="scope.row.type" style="width: 140px">
                  <el-option label="平方" value="平方" />
                  <el-option label="片数" value="片数" />
                </el-select>
                <span v-else>{{ scope.row.type }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="value" label="数值" width="180">
              <template #default="scope">
                <el-input-number
                  v-if="scope.row.editing"
                  v-model="scope.row.value"
                  :precision="scope.row.type === '平方' ? 2 : 0"
                  :step="scope.row.type === '平方' ? 0.01 : 1"
                  :min="0"
                  controls-position="right"
                  style="width: 140px"
                />
                <span v-else>{{ scope.row.value }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="scope">
                <el-button-group>
                  <el-button 
                    size="small" 
                    :type="scope.row.editing ? 'success' : 'primary'"
                    @click="handlePlannedEdit(scope.$index, scope.row)"
                  >
                    {{ scope.row.editing ? '保存' : '编辑' }}
                  </el-button>
                  <el-button 
                    v-if="scope.row.editing" 
                    size="small"
                    @click="cancelEdit(scope.row)"
                  >
                    取消
                  </el-button>
                  <el-button 
                    v-else 
                    size="small" 
                    type="danger" 
                    @click="handleDelete(scope.$index, plannedData, 'planned')"
                  >
                    删除
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>