物资明细优化

src/types/components.d.ts

@@ -46,6 +46,7 @@ declare module 'vue' {
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -84,6 +85,7 @@ declare module 'vue' {
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
     IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
     IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
+    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['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/views/comprehensiveGuarantee/MaterialReserveManagement/MaterialDetails.vue

@@ -4,105 +4,242 @@
       <div style="display: flex">
         <el-form ref="queryFormRef" :model="queryParams" :inline="true">
           <el-form-item label="区县：" prop="district" label-width="auto">
-            <el-select v-model="queryParams.district" placeholder="全部" clearable>
-              <el-option v-for="item in district_type" :label="item.label" :value="item.value" />
+            <el-select v-model="queryParams.district" placeholder="茂名市" clearable>
+              <el-option v-for="item in district_type" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
-          <el-form-item label="仓库：" prop="district" label-width="auto">
+          <el-form-item label="仓库：" prop="warehouse_id" label-width="auto">
             <el-select v-model="queryParams.warehouse_id" placeholder="全部" clearable>
-              <el-option v-for="item in district_type" :label="item.label" :value="item.value" />
+              <el-option v-for="item in warehouseList" :key="item.warehouse_id" :label="item.warehouse_name" :value="item.warehouse_id" />
             </el-select>
           </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
         </el-form>
-        <div>数据来源：应急物资物流管理系统</div>
-        <div style="margin-left: 40px;">最近更新：2025年03月21日</div>
-        <el-button type="primary" style="margin-left: 150px">同步</el-button>
       </div>
-      <el-row :gutter="30" style="height: 50px">
-        <el-col :span="6">
-          <div class="count">账面数量：333302项</div>
-        </el-col>
-        <el-col :span="6">
-          <div class="count">账面金额：66636788.468元</div>
-        </el-col>
-        <el-col :span="3">
-          <el-button>批量申请出库</el-button>
+      <el-row :gutter="10" style="margin-bottom: 18px">
+        <el-col :span="1.5">
+          <el-button type="primary" icon="Plus" :disabled="ids.length === 0">批量申请出库</el-button>
         </el-col>
-        <el-col :span="3">
-          <el-button type="primary">导出清单</el-button>
+        <el-col :span="1.5">
+          <el-button type="warning" plain icon="Download">导出清单</el-button>
         </el-col>
       </el-row>
-
+      <div class="row">
+        <div class="item-flex">
+          <div class="label">账面数量：</div>
+          <div class="text">{{ statisticalData.book_quantity }}<span class="unit">项</span></div>
+        </div>
+        <div class="item-flex">
+          <div class="label">账面金额：</div>
+          <div class="text">{{ statisticalData.book_money }}<span class="unit">元</span></div>
+        </div>
+        <div class="item-flex">
+          <div class="label">数据来源：</div>
+          <div class="text2">{{ statisticalData.from_sys }}</div>
+        </div>
+        <div class="item-flex">
+          <div class="label">最近更新：</div>
+          <div class="text2">{{ statisticalData.update_date }}</div>
+        </div>
+        <div class="button-box">
+          <el-button type="primary" @click="getList">同步</el-button>
+        </div>
+      </div>
+      <el-table
+        ref="multipleTable"
+        v-loading="loading"
+        :data="tableData"
+        border
+        class="image-table"
+        :max-height="maxHeight"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="物资名称" align="center" prop="material_name" />
+        <el-table-column label="规格/型号" align="center" prop="model" />
+        <el-table-column label="入库日期" align="center" prop="indate" width="150px" />
+        <el-table-column label="使用状态" align="center" prop="active_state" />
+        <el-table-column label="单位" align="center" prop="unit" />
+        <el-table-column label="账面数" align="center">
+          <el-table-column label="数量" align="center" prop="quantity" />
+          <el-table-column label="单价" align="center" prop="unit_price" />
+          <el-table-column label="金额" align="center" prop="amount_money" />
+        </el-table-column>
+        <el-table-column label="情况说明" align="center" prop="situation_description" />
+        <el-table-column label="仓库" align="center" prop="warehouse" />
+        <el-table-column label="所属单位" align="center" prop="affiliated_unit" />
+        <el-table-column label="所属区域" align="center" prop="region" />
+        <el-table-column label="操作" align="center" width="100px" fixed="right" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-button type="text" class="common-btn-text-primary" @click="applyOutbound(scope.row.material_id)">申请出库</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </div>
-    <el-table ref="multipleTable" v-loading="loading" :data="tableData" border class="image-table" :max-height="maxHeight">
-      <el-table-column label="物资名称" align="center" prop="material_name" />
-      <el-table-column label="规格/型号" align="center" prop="model" />
-      <el-table-column label="入库日期" align="center" prop="indate" width="150px" />
-      <el-table-column label="使用状态" align="center" prop="active_state" />
-      <el-table-column label="单位" align="center" prop="unit" />
-      <el-table-column label="账面数">
-        <el-table-column label="数量" align="center" prop="quantity" />
-        <el-table-column label="单价" align="center" prop="unit_price" />
-        <el-table-column label="金额" align="center" prop="amount_money" />
-      </el-table-column>
-      <el-table-column label="情况说明" align="center" prop="situation_description" />
-      <el-table-column label="仓库" align="center" prop="warehouse" />
-      <el-table-column label="所属单位" align="center" prop="affiliated_unit" />
-      <el-table-column label="所属区域" align="center" prop="region" />
-      <el-table-column label="操作" align="center" width="140px" fixed="right" class-name="small-padding fixed-width">
-        <template #default="scope">
-          <el-button type="text" class="common-btn-text-primary" @click="applyOutbound(scope.row.material_id)">申请出库</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
     <ApplyOutbound v-if="isApply" @close="handleCancel" />
   </div>
-
 </template>
 
 <script setup lang="ts">
 import ApplyOutbound from '@/views/comprehensiveGuarantee/MaterialReserveManagement/applyOutbound.vue';
+import { getMaterialWarehouseList } from '@/api/comprehensiveGuarantee/materialReserveManagement/godownManagement';
+import { parseTime } from '@/utils/ruoyi';
+import { ref } from 'vue';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { district_type } = toRefs<any>(proxy?.useDict('district_type'));
+const queryFormRef = ref<ElFormInstance>();
 
 const isApply = ref(false);
-const queryParams= {
+// 定义响应式变量
+const loading = ref(false);
+const queryParams = reactive({
   page: 1,
   pageSize: 10,
   district: '',
   warehouse_id: '',
   from_sys: ''
-}
-const tableData = ref([
-  {
-    material_name: '橡皮艇',
-    model: '船只',
-    indate: '2025年3月26日',
-    active_state: '正在使用',
-    unit: '应急局',
-    quantity: '1',
-    unit_price: '999',
-    amount_money: '999',
-    situation_description: '正常',
-    warehouse: '仓库1',
-    affiliated_unit: '1',
-    region: '茂南区'
-  }
-]);
-const applyOutbound = () => {
+});
+const total = ref(0);
+const ids = ref<Array<string | number>>([]);
+const tableData = ref([]);
+const statisticalData = ref({
+  book_quantity: '',
+  book_money: '',
+  from_sys: '',
+  update_date: ''
+});
+let warehouseList = ref([]);
+const maxHeight = ref(window.innerHeight * 0.8);
+
+const applyOutbound = (id: string) => {
   isApply.value = true;
-}
+};
+
 const handleCancel = () => {
   isApply.value = false;
-}
-</script>
+};
 
+/**
+ * 搜索按钮操作
+ */
+const handleQuery = () => {
+  queryParams.page = 1;
+  getList();
+};
 
+/** 重置 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    // 临时数据
+    const date = new Date();
+    const res = {
+      data: [
+        {
+          id: '123213',
+          material_name: '橡皮艇',
+          model: '船只',
+          indate: '2025.3.26',
+          active_state: '正在使用',
+          unit: '应急局',
+          quantity: '1',
+          unit_price: '999',
+          amount_money: '999',
+          situation_description: '正常',
+          warehouse: '仓库1',
+          affiliated_unit: '1',
+          region: '茂南区'
+        }
+      ],
+      statisticalData: {
+        book_quantity: '338231',
+        book_money: '66676256.36',
+        from_sys: '应急物资物流管理系统',
+        update_date: parseTime(date, '{y}年{m}月{d}日 {h}:{i}:{s}')
+      },
+      total: 1
+    };
+    tableData.value = res.data;
+    statisticalData.value = res.statisticalData;
+    total.value = res.total;
+    loading.value = false;
+  }, 300);
+};
+/** 多选框选中数据 */
+const handleSelectionChange = (selection) => {
+  ids.value = selection.map((item) => item.id);
+};
+// 处理窗口大小变化
+const handleResize = () => {
+  maxHeight.value = window.innerHeight * 0.8;
+};
+onMounted(() => {
+  getList();
+  getMaterialWarehouseList().then((res) => {
+    warehouseList.value = res.data;
+  });
+  window.addEventListener('resize', handleResize);
+});
+
+// 在组件卸载前移除窗口大小变化监听器
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+});
+</script>
 
 <style scoped lang="scss">
-.count {
-  background-color: #f2f2f2;
-  padding: 10px 30px;
+.row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 18px;
+
+  .item-flex {
+    display: flex;
+    flex-direction: column;
+    margin-left: 20px;
+    flex: 1;
+    background-color: #fff;
+    padding: 12px 15px;
+    border-radius: 2px;
+    border: 1px solid #e8e8e8;
+    &:first-child {
+      margin-left: 0;
+    }
+    .label {
+      color: #545555;
+      font-weight: bold;
+      font-size: 16px;
+      margin-bottom: 10px;
+    }
+    .text {
+      font-weight: bold;
+      color: rgba(0, 0, 0, 0.85);
+      font-size: 22px;
+    }
+    .text2 {
+      font-weight: bold;
+      color: rgba(0, 0, 0, 0.85);
+      font-size: 18px;
+    }
+    .unit {
+      color: rgba(0, 0, 0, 0.85);
+      font-size: 18px;
+      margin-left: 4px;
+    }
+  }
+  .button-box {
+    flex-shrink: 0;
+    margin-left: 20px;
+  }
 }
 </style>

src/views/riskPrevention/SafetyProductionManagement/BusinessPortraits.vue

@@ -215,7 +215,6 @@ onMounted(() => {
 // 在组件卸载前移除窗口大小变化监听器
 onBeforeUnmount(() => {
   window.removeEventListener('resize', handleResize);
-
 });
 
 const props = {