yjhtgl-web/src/views/comprehensiveGuarantee/materialReserves/materialsDistributionAdd.vue

<template>
  <div class="app-container p-2">
    <el-row :gutter="20">
      <el-col :span="6">
        <h2>新增</h2>
      </el-col>
      <el-col :lg="24" :xs="24">
        <el-table :data="tableData" border height="400">
          <el-table-column label="序号" prop="seqNo" width="80">
            <template #default="{ $index }">
              <span>{{ $index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="物资类型" prop="materialType">
            <template #default="{ row, $index }">
              <span
                class="editable-span"
                contenteditable="true"
                @blur="saveEdit($index, 'materialType', $event.target.innerText)"
                v-text="row.materialType"
              ></span>
            </template>
          </el-table-column>
          <el-table-column label="物资名称" prop="materialName">
            <template #default="{ row, $index }">
              <span
                class="editable-span"
                contenteditable="true"
                @blur="saveEdit($index, 'materialName', $event.target.innerText)"
                v-text="row.materialName"
              ></span>
            </template>
          </el-table-column>
          <el-table-column label="物资数量（件）" prop="quantity">
            <template #default="{ row, $index }">
              <span
                class="editable-span"
                contenteditable="true"
                @blur="saveEdit($index, 'quantity', $event.target.innerText)"
                v-text="row.quantity"
              ></span>
            </template>
          </el-table-column>
          <el-table-column label="物资用途" prop="purpose">
            <template #default="{ row, $index }">
              <span
                class="editable-span"
                contenteditable="true"
                @blur="saveEdit($index, 'purpose', $event.target.innerText)"
                v-text="row.purpose"
              ></span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <div class="common-dialog-footer" style="width: 100%; justify-content: center; display: flex">
        <el-row :span="24" :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" @click="handleAddRow">新增一项</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" @click="handleSave">提交</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" @click="handleReturn">取消</el-button>
          </el-col>
        </el-row>
      </div>
    </el-row>
  </div>
</template>

<script setup lang="ts">

const props = defineProps({
  eventId: String
});

const emits = defineEmits(['close']);

const tableData = ref<any[]>([]);

const loadFromLocalStorage = () => {
  const storedData = localStorage.getItem('tableData');
  if (storedData) {
    tableData.value = JSON.parse(storedData);
  } else {
    tableData.value = [
      { materialType: '三防物资', materialName: '雨衣', quantity: '100', purpose: '高州泰利台风前置' },
      { materialType: '三防物资', materialName: '水鞋', quantity: '10', purpose: '高州泰利台风前置' },
      { materialType: '三防物资', materialName: '雨伞', quantity: '50', purpose: '高州泰利台风前置' }
    ];
  }
};

const addDefaultRow = () => {
  const newRow = {
    materialType: '',
    materialName: '',
    quantity: '',
    purpose: ''
  };
  tableData.value.push(newRow);
};

const saveEdit = (index: number, key: string, value: string) => {
  tableData.value[index][key] = value;
  localStorage.setItem('tableData', JSON.stringify(tableData.value));
};

const handleAddRow = () => addDefaultRow();

const handleReturn = () => {
  emits('close');
};

const handleSave = () => {
  // 这里可以添加保存到服务器的逻辑
  console.log('数据已保存:', tableData.value);
};

onMounted(() => {
  loadFromLocalStorage();
});
</script>

<style scoped>
.app-container {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.report-period {
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
}
.editable-span {
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.editable-span[contenteditable='true'] {
  white-space: normal;
  outline: none; /* 移除编辑时的焦点边框 */
}
.editable-span[contenteditable='true']:empty::before {
  content: attr(data-placeholder); /* 可选：为空时显示占位符 */
  color: #999;
}
.common-dialog-footer {
  margin-top: 20px;
}
</style>