物资申报

src/api/comprehensiveGuarantee/materialReserveManagement/materialsDeclaration.ts

@@ -14,3 +14,19 @@ export function getDeclarationDetail(id) {
     method: 'get'
   });
 }
+// 新增
+export function createProcurement(data) {
+  return request({
+    url: '/api/resource_provison/material/procurement/create',
+    method: 'post',
+    data: data
+  });
+}
+// 修改
+export function updateProcurement(data, id) {
+  return request({
+    url: '/api/resource_provison/material/type/update/' + id,
+    method: 'put',
+    data: data
+  });
+}

src/types/components.d.ts

@@ -22,9 +22,12 @@ declare module 'vue' {
     DistributionMap: typeof import('./../components/Map/YztMap/DistributionMap.vue')['default']
     DrawMap: typeof import('./../components/Map/YztMap/DrawMap.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
+    ElAnchor: typeof import('element-plus/es')['ElAnchor']
+    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
@@ -42,14 +45,11 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
@@ -58,13 +58,14 @@ declare module 'vue' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
-    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
@@ -76,8 +77,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
-    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/utils/index.ts

@@ -389,3 +389,23 @@ export const setHighText = (text: string, highArray) => {
   });
   return text;
 };
+
+// 检查字符串是否为数字
+export const isNumericString = (str) => {
+  return /^\d+(\.\d+)?$/.test(str); // 这个正则表达式会匹配整数和小数
+};
+
+// 转换为带有两位小数的字符串
+export const formatToTwoDecimalPlaces = (str) => {
+  const [integerPart, decimalPart] = str.split('.');
+
+  if (decimalPart === undefined || decimalPart.length === 0) {
+    // 如果没有小数部分，则补齐 .00
+    return `${integerPart}.00`;
+  } else if (decimalPart.length === 1) {
+    // 如果小数部分只有一位，则补齐到两位
+    return `${integerPart}.${decimalPart}0`;
+  } else {
+    return str; // 直接返回原始字符串表示
+  }
+};

src/views/comprehensiveGuarantee/materialReserves/materialsDeclaration.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <div v-show="!materialsDeclarationViewState.show && !materialsDistributionEditState.show && !materialsDeclarationAddState.show">
+    <div v-show="!materialsDeclarationViewState.show && !materialsDeclarationAddState.show">
       <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
           <el-button type="primary" icon="Plus" @click="handleAdd">新增采购</el-button>
@@ -37,31 +37,19 @@
         @pagination="fetchWorkrData"
       />
     </div>
-    <MaterialsDeclarationView v-if="materialsDeclarationViewState.show" :event-id="materialsDeclarationViewState.eventId" @close="handleCancel" />
-    <MaterialsDistributionEdit v-if="materialsDistributionEditState.show" :event-id="materialsDistributionEditState.eventId" @close="handleCancel" />
+    <MaterialsDeclarationView v-if="materialsDeclarationViewState.show" :id="materialsDeclarationViewState.id" @close="handleCancel" />
     <MaterialsDeclarationAdd v-if="materialsDeclarationAddState.show" @close="handleCancel" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, toRefs } from 'vue';
-import { ElTable, ElTableColumn, ElForm, ElFormItem, ElInput, ElButton, ElText } from 'element-plus';
-import { ComponentInternalInstance, getCurrentInstance } from 'vue';
 import { getDeclarationList } from '@/api/comprehensiveGuarantee/materialReserveManagement/materialsDeclaration';
 import Pagination from '@/components/Pagination/index.vue'; // 假设这是分页组件的路径
 import MaterialsDeclarationView from './materialsDeclarationView.vue'; // 查看详情组件
-import MaterialsDistributionEdit from './materialsDistributionEdit.vue'; // 编辑组件
 import MaterialsDeclarationAdd from './materialsDeclarationAdd.vue';
 const loading = ref(true);
-const showSearch = ref(true);
-const multiple = ref(true);
-const ids = ref<Array<number | string>>([]);
-const single = ref(true);
 const total = ref(0);
 const tableData = ref<any[]>([]);
-const selectedRow = ref<any | null>(null);
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const initFormData = reactive({
   declaration_date: '',
@@ -105,34 +93,31 @@ const resetQuery = () => {
 
 let materialsDeclarationViewState = reactive({
   show: false,
-  eventId: ''
+  id: ''
 });
 
-let materialsDistributionEditState = reactive({
-  show: false,
-  eventId: ''
-});
 let materialsDeclarationAddState = reactive({
   show: false,
-  eventId: ''
+  id: ''
 });
 
 const handleAdd = () => {
+  materialsDeclarationAddState.id = '';
   materialsDeclarationAddState.show = true;
 };
-const handleView = (row: any) => {
-  materialsDeclarationViewState.eventId = row.id;
-  materialsDeclarationViewState.show = true;
-};
 
 const handleUpdate = (row: any) => {
-  materialsDistributionEditState.eventId = row.id;
-  materialsDistributionEditState.show = true;
+  materialsDeclarationAddState.id = row.id;
+  materialsDeclarationAddState.show = true;
+};
+
+const handleView = (row: any) => {
+  materialsDeclarationViewState.id = row.id;
+  materialsDeclarationViewState.show = true;
 };
 
 const handleCancel = () => {
   materialsDeclarationViewState.show = false;
-  materialsDistributionEditState.show = false;
   materialsDeclarationAddState.show = false;
 };
 // 定义审批状态映射

src/views/comprehensiveGuarantee/materialReserves/materialsDeclarationAdd.vue

@@ -1,124 +1,134 @@
 <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="unitPrice">
-            <template #default="{ row, $index }">
-              <span
-                class="editable-span"
-                contenteditable="true"
-                @blur="saveEdit($index, 'unitPrice', $event.target.innerText)"
-                v-text="row.unitPrice"
-              ></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 class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <i class="common-dialog-title-icon" />
+        <div>{{ props.id ? '修改物资申报' : '新增物资申报' }}</div>
       </div>
-    </el-row>
+      <div class="common-dialog-box">
+        <div class="text-box">
+          <div class="text1">申报金额：</div>
+          <div v-show="!!detailData.declaration_amount" class="text2">{{ formatToTwoDecimalPlaces(detailData.declaration_amount) }}元</div>
+        </div>
+        <el-form ref="formRef" :model="detailData" style="width: 100%">
+          <el-table :data="detailData.detail" border :height="height">
+            <el-table-column label="序号" width="80" align="center">
+              <template #default="{ $index }">
+                <span>{{ $index + 1 }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="物资类型" prop="material_type" align="center">
+              <template #default="scope">
+                <el-form-item :prop="'detail.' + scope.$index + '.material_type'" :rules="rules.material_type">
+                  <el-select v-model="scope.row.material_type">
+                    <el-option v-for="(item, index) in material_type" :key="index" :label="item.label" :value="item.value" />
+                  </el-select>
+                </el-form-item>
+              </template>
+            </el-table-column>
+            <el-table-column label="物资名称" prop="material_code" align="center">
+              <template #default="scope">
+                <el-form-item :prop="'detail.' + scope.$index + '.material_type'" :rules="rules.material_type">
+                  <el-select v-model="scope.row.material_code">
+                    <el-option v-for="(item, index) in materialList" :key="index" :label="item.material_name" :value="item.material_id" />
+                  </el-select>
+                </el-form-item>
+              </template>
+            </el-table-column>
+            <el-table-column label="物资数量（件）" prop="material_quantity" align="center">
+              <template #default="scope">
+                <el-form-item :prop="`detail.${scope.$index}.material_quantity`" :rules="rules.material_quantity">
+                  <el-input v-model="scope.row.material_quantity" type="number" placeholder="请输入" @input="calcTotalAmount" />
+                </el-form-item>
+              </template>
+            </el-table-column>
+            <el-table-column label="物资单价（元）" prop="material_unit_price" align="center">
+              <template #default="scope">
+                <el-form-item :prop="'detail.' + scope.$index + '.material_type'" :rules="rules.material_type">
+                  <el-input v-model="scope.row.material_unit_price" type="number" placeholder="请输入" @input="calcTotalAmount" />
+                </el-form-item>
+              </template>
+            </el-table-column>
+            <el-table-column label="物资用途" prop="material_purpose" align="center">
+              <template #default="scope">
+                <el-form-item :prop="'detail.' + scope.$index + '.material_type'" :rules="rules.material_type">
+                  <el-input v-model="scope.row.material_purpose" type="textarea" autosize placeholder="请输入" />
+                </el-form-item>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form>
+        <div class="common-dialog-footer" style="margin-top: 18px">
+          <el-row :span="24" :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button @click="handleReturn">取消</el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button type="primary" @click="handleAddRow">新增一项</el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button :loading="buttonLoading" type="primary" @click="submitForm(formRef)">确定</el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { ElTable, ElButton, ElCol, ElRow, ElTableColumn } from 'element-plus';
-import { defineProps, defineEmits } from 'vue';
+import { getMaterialList } from '@/api/comprehensiveGuarantee/materialReserveManagement/MaterialStatistics';
+import {
+  createProcurement,
+  getDeclarationDetail,
+  updateProcurement
+} from '@/api/comprehensiveGuarantee/materialReserveManagement/materialsDeclaration';
+import BigNumber from 'bignumber.js';
+import { formatToTwoDecimalPlaces, isNumericString } from '@/utils';
 
 const props = defineProps({
-  eventId: String
+  id: String
 });
 
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { material_type } = toRefs<any>(proxy?.useDict('material_type'));
 const emits = defineEmits(['close']);
 
-const tableData = ref<any[]>([]);
-
+const formRef = ref();
+let detailData = reactive({
+  declaration_amount: '',
+  detail: []
+});
+const rules = reactive({
+  material_type: [{ required: true, message: '请选择物资类型', trigger: 'change' }],
+  material_code: [{ required: true, message: '请选择物资名称', trigger: 'change' }],
+  material_quantity: [{ required: true, message: '请输入物资数量', trigger: 'blur' }],
+  material_unit_price: [{ required: true, message: '请输入物资单价', trigger: 'blur' }],
+  material_purpose: [{ required: true, message: '请输入物资用途', trigger: 'blur' }]
+});
+let materialList = ref([]);
+// 新增一列
 const addDefaultRow = () => {
   const newRow = {
-    materialType: '',
-    materialName: '',
-    quantity: '', // 用户需要输入
-    unitPrice: '', // 用户需要输入
-    purpose: ''
+    material_type: '',
+    material_code: '',
+    material_quantity: '',
+    material_unit_price: '',
+    material_purpose: ''
   };
-  tableData.value.push(newRow);
+  detailData.detail.push(newRow);
 };
 
-const saveEdit = (index: number, key: string, value: string) => {
-  let numValue = value;
-
-  if (key === 'quantity' || key === 'unitPrice') {
-    numValue = parseFloat(value);
-    if (isNaN(numValue) || numValue < 0) {
-      // 如果不是有效的数字或者数字小于0，则不更新数据
-      alert('请输入有效的正数！');
-      return;
+// 计算总额
+const calcTotalAmount = () => {
+  let total = new BigNumber('0');
+  detailData.detail.forEach((item) => {
+    if (isNumericString(item.material_quantity) && isNumericString(item.material_unit_price)) {
+      const num = new BigNumber(item.material_quantity).times(new BigNumber(item.material_unit_price));
+      total = total.plus(num);
     }
-    numValue = numValue.toString();
-  }
-
-  tableData.value[index][key] = numValue;
-  localStorage.setItem('tableData', JSON.stringify(tableData.value));
+  });
+  detailData.declaration_amount = total.toString();
 };
 
 const handleAddRow = () => addDefaultRow();
@@ -127,42 +137,80 @@ const handleReturn = () => {
   emits('close');
 };
 
-const handleSave = () => {
-  // 这里可以添加保存到服务器的逻辑
-  console.log('数据已保存:', tableData.value);
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid) => {
+    if (valid) {
+      if (props.id) {
+        updateProcurement(detailData, props.id).then(() => {
+          proxy.$modal.msgSuccess('修改成功');
+          emits('close', true);
+        });
+      } else {
+        createProcurement(detailData).then(() => {
+          proxy.$modal.msgSuccess('新增成功');
+          emits('close', true);
+        });
+      }
+    } else {
+      nextTick(() => {
+        let isError = document.getElementsByClassName('is-error');
+        isError[0].scrollIntoView({
+          // 滚动到指定节点
+          // 值有start,center,end，nearest，当前显示在视图区域中间
+          block: 'center',
+          // 值有auto、instant,smooth，缓动动画（当前是慢速的）
+          behavior: 'smooth'
+        });
+      });
+      proxy.$modal.msgError('表单校验失败');
+      return false;
+    }
+  });
 };
 
+let height = ref(400);
+// 计算表格高度
+const calcHeight = () => {
+  const el = document.getElementsByClassName('common-dialog-content')[0];
+  height.value = el ? el.clientHeight - 173 : 400;
+};
+onMounted(() => {
+  if (props.id) {
+    getDeclarationDetail(props.id).then((res) => {
+      detailData.declaration_amount = res.data.declaration_amount;
+      detailData.detail = res.data.detail;
+    });
+  } else {
+    addDefaultRow();
+  }
+  getMaterialList().then((res) => {
+    materialList.value = res.data;
+  });
+  calcHeight();
+  window.addEventListener('resize', calcHeight);
+});
+onUnmounted(() => {
+  window.removeEventListener('resize', calcHeight);
+});
 </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;
+<style lang="scss" scoped>
+.text-box {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding-bottom: 10px;
+  color: rgba(0, 0, 0, 0.85);
+  .text1 {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .text2 {
+    font-size: 18px;
+  }
 }
-.common-dialog-footer {
-  margin-top: 20px;
+.el-form-item {
+  margin: 18px 0;
 }
 </style>

src/views/comprehensiveGuarantee/materialReserves/materialsDeclarationView.vue

@@ -1,82 +1,112 @@
 <template>
-  <div class="app-container p-2">
-    <el-row :gutter="20">
-      <el-col :span="20">
-        <h2>详情</h2>
-        <div class="report-info">
-          <p class="report-amount">申报金额：20000.00元</p>
-          <p class="approval-status">审批情况：{{ approvalStatus }}</p>
-        </div>
-      </el-col>
-      <el-col :lg="24" :xs="24">
-        <el-table :data="tableData" border height="400">
-          <el-table-column label="序号" prop="seqNo" width="80">
+  <div class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <i class="common-dialog-title-icon" />
+        <div>{{ props.id ? '修改物资申报' : '新增物资申报' }}</div>
+      </div>
+      <div class="common-dialog-box">
+        <el-row :gutter="20" style="width: 100%">
+          <el-col :span="12">
+            <div class="text-box">
+              <div class="text1">申报金额：</div>
+              <div v-show="!!detailData.declaration_amount" class="text2">{{ formatToTwoDecimalPlaces(detailData.declaration_amount) }}元</div>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="text-box">
+              <div class="text1">审批状态：</div>
+              <div class="text2">{{ detailData.approval_status }}</div>
+            </div>
+          </el-col>
+        </el-row>
+        <el-table :data="detailData.detail" border :height="height">
+          <el-table-column label="序号" width="80" align="center">
             <template #default="{ $index }">
               <span>{{ $index + 1 }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="物资类型" prop="materialType"></el-table-column>
-          <el-table-column label="物资名称" prop="materialName"></el-table-column>
-          <el-table-column label="物资数量（件）" prop="quantity"></el-table-column>
-          <el-table-column label="物资单价（元）" prop="unitPrice"></el-table-column>
-          <el-table-column label="物资用途" prop="purpose"></el-table-column>
+          <el-table-column label="物资类型" prop="material_type" align="center">
+            <template #default="scope">
+              <dict-tag :options="material_type" :value="scope.row.material_type" />
+            </template>
+          </el-table-column>
+          <el-table-column label="物资名称" prop="material_name" align="center" />
+          <el-table-column label="物资数量（件）" prop="material_quantity" align="center"/>
+          <el-table-column label="物资单价（元）" prop="material_unit_price" align="center" />
+          <el-table-column label="物资用途" prop="material_purpose" align="center" />
         </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="danger" @click="handleReturn">返回</el-button>
-          </el-col>
-        </el-row>
+        <div class="common-dialog-footer" style="margin-top: 18px">
+          <el-row :span="24" :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button type="primary" @click="handleReturn">返回</el-button>
+            </el-col>
+          </el-row>
+        </div>
       </div>
-    </el-row>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { ElTable, ElButton, ElCol, ElRow, ElTableColumn } from 'element-plus';
-import { defineProps, defineEmits } from 'vue';
+import { getMaterialList } from '@/api/comprehensiveGuarantee/materialReserveManagement/MaterialStatistics';
+import { getDeclarationDetail } from '@/api/comprehensiveGuarantee/materialReserveManagement/materialsDeclaration';
+import { formatToTwoDecimalPlaces } from '@/utils';
 
 const props = defineProps({
-  eventId: String
+  id: String
 });
 
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { material_type } = toRefs<any>(proxy?.useDict('material_type'));
 const emits = defineEmits(['close']);
-
-// 静态数据
-const tableData = ref([
-  { materialType: '三防物资', materialName: '雨衣', quantity: '100', unitPrice: '5.00', purpose: '2025年汛期储备' },
-  { materialType: '三防物资', materialName: '水鞋', quantity: '10', unitPrice: '5000.00', purpose: '2025年汛期储备' },
-  { materialType: '三防物资', materialName: '雨伞', quantity: '50', unitPrice: '100.00', purpose: '2025年汛期储备' }
-]);
-
+let detailData = reactive({
+  declaration_amount: '',
+  approval_status: '',
+  detail: []
+});
+let materialList = ref([]);
 const approvalStatus = ref('待审批');
 
 const handleReturn = () => {
   emits('close');
 };
-</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;
-}
+let height = ref(400);
+// 计算表格高度
+const calcHeight = () => {
+  const el = document.getElementsByClassName('common-dialog-content')[0];
+  height.value = el ? el.clientHeight - 173 : 400;
+};
+onMounted(() => {
+  getDeclarationDetail(props.id).then((res) => {
+    detailData.declaration_amount = res.data.declaration_amount;
+    detailData.approval_status = res.data.approval_status;
+    detailData.detail = res.data.detail;
+  });
+  getMaterialList().then((res) => {
+    materialList.value = res.data;
+  });
+  calcHeight();
+  window.addEventListener('resize', calcHeight);
+});
+onUnmounted(() => {
+  window.removeEventListener('resize', calcHeight);
+});
+</script>
 
-.report-info {
+<style lang="scss" scoped>
+.text-box {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-top: 10px;
-}
-
-.report-amount,
-.approval-status {
-  font-size: 14px;
-  color: #606266;
+  padding-bottom: 10px;
+  color: rgba(0, 0, 0, 0.85);
+  .text1 {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .text2 {
+    font-size: 18px;
+  }
 }
 </style>

src/views/comprehensiveGuarantee/materialReserves/materialsDistributionAdd.vue

@@ -71,9 +71,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { ElTable, ElButton, ElCol, ElRow, ElTableColumn } from 'element-plus';
-import { defineProps, defineEmits } from 'vue';
 
 const props = defineProps({
   eventId: String

src/views/comprehensiveGuarantee/materialReserves/materialsDistributionEdit.vue

@@ -1,174 +0,0 @@
-<template>
-  <div class="app-container p-2">
-    <el-row :gutter="20">
-      <el-col :span="6">
-        <h2>编辑</h2>
-        <p class="report-period">申报金额：20000.00元</p>
-      </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="unitPrice">
-            <template #default="{ row, $index }">
-              <span
-                class="editable-span"
-                contenteditable="true"
-                @blur="saveEdit($index, 'unitPrice', $event.target.innerText)"
-                v-text="row.unitPrice"
-              ></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">
-import { ref, onMounted } from 'vue';
-import { ElTable, ElButton, ElCol, ElRow, ElTableColumn } from 'element-plus';
-import axios from 'axios'; // 引入axios
-
-const props = defineProps({
-  eventId: String
-});
-
-const emits = defineEmits(['close']);
-
-const tableData = ref([
-  { materialType: '三防物资', materialName: '雨衣', quantity: '100', unitPrice: '5.00', purpose: '2025年汛期储备' },
-  { materialType: '三防物资', materialName: '水鞋', quantity: '10', unitPrice: '5000.00', purpose: '2025年汛期储备' },
-  { materialType: '三防物资', materialName: '雨伞', quantity: '50', unitPrice: '100.00', purpose: '2025年汛期储备' }
-]);
-
-const addDefaultRow = () => {
-  const newRow = {
-    materialType: '',
-    materialName: '',
-    quantity: '',
-    unitPrice: '',
-    purpose: ''
-  };
-  tableData.value.push(newRow);
-};
-
-const saveEdit = (index: number, key: string, value: string) => {
-  if (key === 'quantity' || key === 'unitPrice') {
-    const numValue = parseFloat(value);
-    if (isNaN(numValue)) {
-      return;
-    }
-    value = numValue.toString();
-  }
-  tableData.value[index][key] = value;
-};
-
-const handleAddRow = () => addDefaultRow();
-
-const handleReturn = () => {
-  emits('close');
-};
-
-const handleSave = async () => {
-  try {
-    const response = await axios.post('/api/submitData', { data: tableData.value });
-    console.log('数据已成功提交:', response.data);
-  } catch (error) {
-    console.error('提交数据时发生错误:', error);
-  }
-};
-
-onMounted(() => {
-  // 如果需要从后端加载数据，可以在这里调用相应的API
-});
-</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>

src/views/dataFilling/writeForm.vue

@@ -59,11 +59,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { ElTable, ElButton, ElCol, ElRow, ElTableColumn } from 'element-plus';
 import * as XLSX from 'xlsx';
 import { writeView, submitFill } from '@/api/dataFilling/datafilling';
-import { defineProps, defineEmits } from 'vue';
 
 const props = defineProps({
   eventId: String

src/views/duty/eventing/EventLevelInfoDialog.vue

@@ -24,7 +24,6 @@
 </template>
 
 <script lang="ts" setup>
-import { defineEmits } from 'vue';
 const emits = defineEmits(['closeDialog']);
 const closeDialog = () => {
   emits('closeDialog');

src/views/emergencyCommandMap/RightSection/RenWuTanChuan.vue

@@ -26,7 +26,6 @@
 </template>
 
 <script lang="ts" setup>
-import { defineProps, defineEmits, reactive, watch, computed } from 'vue';
 import Dialog from '@/components/Dialog/index.vue';
 import { updateTaskRegistration } from '@/api/emergencyCommandMap/JointDuty.ts';
 

src/views/emergencyCommandMap/RightSection/StartPlan.vue

@@ -52,7 +52,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, defineProps, defineEmits, reactive } from 'vue';
 import { ElMessage } from 'element-plus';
 import TaskDelivery from './TaskDelivery.vue';
 import { matchingPlan, launchPlan, getPlanDoc, cancelPlan, updatePlanResponseLevel } from '@/api/duty/eventing';

src/views/emergencyCommandMap/RightSection/TaskDelivery.vue

@@ -31,14 +31,13 @@
       <div class="dialog-footer" style="margin-right:8px">
         <div class="common-btn" @click="closeDialog" style="margin-right: 20px">取 消</div>
         <div class="common-btn-primary2" @click="sendTasks">确认发送H5短信</div>
-        
+
       </div>
     </template>
   </Dialog>
 </template>
 
 <script lang="ts" setup>
-import { defineProps, defineEmits, ref, watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import { unitTask, sendTask } from '@/api/duty/eventing';
 

src/views/knowledge/knowledge-management/detail.vue

@@ -44,7 +44,6 @@
 </template>
 
 <script setup>
-import { ref, onMounted, defineProps, defineEmits } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { fetchReportDetail } from '@/api/knowledge/index';