物资信息管理

src/views/comprehensiveGuarantee/MaterialReserveManagement/MaterialInformation.vue

@@ -1,6 +1,297 @@
 <template>
-  <!--物资信息管理-->
+  <div>
+    <div v-show="!addMaterialInformationState.show " class="app-container">
+      <div>
+        <transition name="fade">
+          <div v-show="showSearch" class="mb-[10px]">
+            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+              <el-form-item  :span="5" label="物资编码：" prop="materials_id" label-width="auto">
+                <el-input
+                  v-model="queryParams.materials_id"
+                  placeholder="请输入物资编码"
+                  clearable
+                  @keyup.enter="handleQuery"
+                />
+              </el-form-item>
+              <el-form-item  :span="5" label="物资名称：" prop="materials_type" label-width="auto">
+                <el-input
+                  v-model="queryParams.materials_type"
+                  placeholder="请输入物资名称"
+                  clearable
+                  @keyup.enter="handleQuery"
+                />
+              </el-form-item>
+              <el-form-item :span="5" label="仓库：" prop="materials_warehouse" label-width="auto">
+                <el-select v-model="queryParams.materials_warehouse" placeholder="全部" clearable>
+                  <el-option v-for="item in warehouse" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item :span="5" label="来源：" prop="materials_origin" label-width="auto">
+                <el-select v-model="queryParams.materials_origin" placeholder="全部" clearable>
+                  <el-option v-for="item in origin" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              </el-form-item>
+              <el-form-item>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+            <el-row :gutter="30" style="height: 50px">
+              <el-col :span="10">
+                <el-button type="primary" @click="handleAdd">新增</el-button>
+                <el-button type="primary" @click="handleImport">数据导入</el-button>
+                <el-button type="primary" @click="handleExport">导出盘点</el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </transition>
+        <el-table ref="multipleTable" v-loading="loading" :data="tableData" border :max-height="maxHeight" style="width: 96%">
+          <el-table-column label="物资图片数据" align="center" prop="materialImageData" fixed show-overflow-tooltip/>
+          <el-table-column label="物资编码" align="center" prop="materialCode" show-overflow-tooltip/>
+          <el-table-column label="物资名称" align="center" prop="materialName" show-overflow-tooltip/>
+          <el-table-column label="仓库" align="center" prop="warehouseName" show-overflow-tooltip/>
+          <el-table-column label="库存" align="center" prop="stockQuantity" show-overflow-tooltip/>
+          <el-table-column label="规格" align="center" prop="specification" show-overflow-tooltip/>
+          <el-table-column label="型号" align="center" prop="model" show-overflow-tooltip/>
+          <el-table-column label="分类名称" align="center" prop="categoryName" show-overflow-tooltip/>
+          <el-table-column label="物资类型" align="center" prop="materialType" show-overflow-tooltip/>
+          <el-table-column label="计量单位名称" align="center" prop="measurementUnit" show-overflow-tooltip/>
+          <el-table-column label="品牌名称" align="center" prop="brandName" show-overflow-tooltip/>
+          <el-table-column label="长(cm)" align="center" prop="lengthCm" show-overflow-tooltip/>
+          <el-table-column label="宽(cm)" align="center" prop="widthCm" show-overflow-tooltip/>
+          <el-table-column label="高(cm)" align="center" prop="heightCm" show-overflow-tooltip/>
+          <el-table-column label="体积(cm³)" align="center" prop="volumeCm3" show-overflow-tooltip/>
+          <el-table-column label="毛重(kg)" align="center" prop="grossWeightKg" show-overflow-tooltip/>
+          <el-table-column label="净重(kg)" align="center" prop="netWeightKg" show-overflow-tooltip/>
+          <el-table-column label="生产厂商" align="center" prop="manufacturer" show-overflow-tooltip/>
+          <el-table-column label="库存预警推送人" align="center" prop="stockWarningNotifier" show-overflow-tooltip/>
+          <el-table-column label="产地" align="center" prop="origin" show-overflow-tooltip/>
+          <el-table-column label="状态" align="center" prop="status" show-overflow-tooltip/>
+          <el-table-column label="备注" align="center" prop="remarks" show-overflow-tooltip/>
+          <el-table-column label="库房" align="center" prop="storageRoom" show-overflow-tooltip/>
+          <el-table-column label="包装数量" align="center" prop="packagingQuantity" show-overflow-tooltip/>
+          <el-table-column label="包装体积(cm³)" align="center" prop="packagingVolumeCm3" show-overflow-tooltip/>
+          <el-table-column label="包装重量(kg)" align="center" prop="packagingWeightKg" show-overflow-tooltip/>
+          <el-table-column label="价格" align="center" prop="price" show-overflow-tooltip/>
+          <el-table-column label="售卖价格" align="center" prop="sellingPrice" show-overflow-tooltip/>
+          <el-table-column label="价值" align="center" prop="value" show-overflow-tooltip/>
+          <el-table-column label="成本价格" align="center" prop="costPrice" show-overflow-tooltip/>
+          <el-table-column label="适用灾种" align="center" prop="applicableDisasterType" show-overflow-tooltip/>
+          <el-table-column label="使用保养" align="center" prop="usageAndMaintenance" show-overflow-tooltip/>
+          <el-table-column label="供应商名称" align="center" prop="supplierName" show-overflow-tooltip/>
+          <el-table-column label="特殊运输要求" align="center" prop="specialTransportRequirements" show-overflow-tooltip/>
+          <el-table-column label="材质" align="center" prop="material" show-overflow-tooltip/>
+          <el-table-column label="保质期" align="center" prop="shelfLife" show-overflow-tooltip/>
+          <el-table-column label="库存预警数量" align="center" prop="stockWarningQuantity" show-overflow-tooltip/>
+          <el-table-column label="保质期到期预警天数" align="center" prop="shelfLifeWarningDays" show-overflow-tooltip/>
+          <el-table-column label="保质期预警推送人" align="center" prop="shelfLifeWarningNotifier" show-overflow-tooltip/>
+          <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-button type="text" class="common-btn-text-primary" @click="handleAdd">详情</el-button>
+              <el-button type="text" class="common-btn-text-primary" @click="handleAdd">编辑</el-button>
+              <el-button type="text" class="common-btn-text-primary" @click="handleView">移除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.page"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @change-page="handlePaginationChange"
+        />
+      </div>
+    </div>
+    <addMaterialInformation v-if="addMaterialInformationState.show" @close="handleCancel" />
+<!--    <impotTypesMaterials v-if="impotTypesMaterialsState.show" @close="handleCancel" />-->
+  </div>
 </template>
-<script lang="ts">
+
+<script setup lang="ts">
+import addMaterialInformation from "./addMaterialInformation.vue";
+import impotTypesMaterials from "./impotTypesMaterials.vue";
+import { ref,reactive, onMounted, onBeforeUnmount } from "vue";
+const showSearch = ref(true);
+// 定义响应式变量
+const loading = ref(false);
+const maxHeight = ref(window.innerHeight * 0.8);
+const total = ref();
+// 处理窗口大小变化
+const handleResize = () => {
+  maxHeight.value = window.innerHeight * 0.8;
+};
+const initFormData = reactive({
+  table_id: '',
+  table_name: '',
+  material_category_id: '',
+  parent_category_id: '',
+  material_category_name: '',
+  material_category_level: '',
+  sort_order: '',
+  display_status: ''
+});
+const data =reactive({
+  form: {...initFormData},
+  queryParams:{
+    page: '1',
+    pageSize: '10',
+    materials_id: '',
+    materials_type: '',
+    materials_warehouse: '',
+    materials_origin: ''
+  }
+})
+
+const { queryParams, form } = toRefs(data);
+
+const tableData = [
+  {
+    "materialImageData": "image1.jpg",
+    "materialCode": "M001",
+    "materialName": "螺丝钉",
+    "warehouseName": "一号仓库",
+    "stockQuantity": 1000,
+    "specification": "M6x10",
+    "model": "标准型",
+    "categoryName": "五金",
+    "materialType": "金属",
+    "measurementUnit": "个",
+    "brandName": "金盾",
+    "lengthCm": 10,
+    "widthCm": 0.6,
+    "heightCm": 0.6,
+    "volumeCm3": 36,
+    "grossWeightKg": 5,
+    "netWeightKg": 4.8,
+    "manufacturer": "金盾制造厂",
+    "stockWarningNotifier": "张三",
+    "origin": "中国广东",
+    "status": "在库",
+    "remarks": "无",
+    "storageRoom": "A区1号库",
+    "packagingQuantity": 100,
+    "packagingVolumeCm3": 3600,
+    "packagingWeightKg": 48,
+    "price": 0.1,
+    "sellingPrice": 0.15,
+    "value": 150,
+    "costPrice": 0.08,
+    "applicableDisasterType": "通用",
+    "usageAndMaintenance": "定期检查，防止锈蚀",
+    "supplierName": "金盾供应商",
+    "specialTransportRequirements": "无",
+    "material": "钢",
+    "shelfLife": "24个月",
+    "stockWarningQuantity": 200,
+    "shelfLifeWarningDays": 30,
+    "shelfLifeWarningNotifier": "李四"
+  },
+  {
+    "materialImageData": "image2.jpg",
+    "materialCode": "M002",
+    "materialName": "水管",
+    "warehouseName": "二号仓库",
+    "stockQuantity": 500,
+    "specification": "DN20",
+    "model": "加厚型",
+    "categoryName": "建材",
+    "materialType": "塑料",
+    "measurementUnit": "米",
+    "brandName": "蓝鲸",
+    "lengthCm": 200,
+    "widthCm": 15,
+    "heightCm": 15,
+    "volumeCm3": 45000,
+    "grossWeightKg": 2.5,
+    "netWeightKg": 2.3,
+    "manufacturer": "蓝鲸制造公司",
+    "stockWarningNotifier": "王五",
+    "origin": "中国浙江",
+    "status": "在库",
+    "remarks": "注意防潮",
+    "storageRoom": "B区2号库",
+    "packagingQuantity": 50,
+    "packagingVolumeCm3": 2250000,
+    "packagingWeightKg": 115,
+    "price": 5,
+    "sellingPrice": 6,
+    "value": 3000,
+    "costPrice": 4.5,
+    "applicableDisasterType": "通用",
+    "usageAndMaintenance": "避免阳光直射",
+    "supplierName": "蓝鲸供应商",
+    "specialTransportRequirements": "轻拿轻放",
+    "material": "PVC",
+    "shelfLife": "12个月",
+    "stockWarningQuantity": 100,
+    "shelfLifeWarningDays": 60,
+    "shelfLifeWarningNotifier": "赵六"
+  }
+  // 可以根据需要添加更多数据
+];
+
+const warehouse = [
+  { value: '', label: '全部' },
+  { value: '0', label: '茂名粤西物资储备' },
+  { value: '1', label: '森林防火巡查' },
+  { value: '2', label: '重点危化企业巡查' },
+  { value: '3', label: '重点水库水位巡查' }
+];
+
+const origin = [
+  { value: '', label: '全部' },
+  { value: '0', label: '粤西物资储备系统' },
+  { value: '1', label: '茂名市发改委物资储备系统' },
+  { value: '2', label: '本地系统' }
+];
+const handleQuery = () => {
+  queryParams.value.page = 1;
+  // fetchWorkrData();
+};
+const resetQuery = () => {
+  queryParams.value = { page: 1, pageSize: 10, materials_id: '', materials_type: '',materials_warehouse: '',materials_origin: '' };
+  handleQuery();
+};
+const addMaterialInformationState = reactive({
+  show: false, // 初始化show为false
+});
+
+const handleAdd = () => {
+  addMaterialInformationState.show = true;
+};
+
+const upload = () => {
+  // 这里可能需要实现上传逻辑，暂时只是显示WriteForm作为示例
+  addMaterialInformationState.show = true;
+};
+
+const handleCancel = () => {
+  addMaterialInformationState.show = false;
+};
+
+const handleImport = () => {
+  impotTypesMaterialsState.show=true;
+};
+
+const handleView = () => {
+  outboundDetailsState.show=true;
+};
+
+const handlePaginationChange = (page: number) => {
+  queryParams.page = page;
+  // fetchTableData(); //
+};
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+});
+
+// 在组件卸载前移除窗口大小变化监听器
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+});
 </script>
+
 <style lang="scss" scoped></style>

src/views/comprehensiveGuarantee/MaterialReserveManagement/addMaterialInformation.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <i class="common-dialog-title-icon" />
+        <div>新增</div>
+      </div>
+      <div class="common-dialog-box">
+        <el-form ref="eventFormRef" :model="form" :rules="rules" label-width="120px">
+          <el-form-item label="物资图片数据：" prop="materialImageData">
+            <el-input v-model="form.materialImageData" placeholder="请输入物资图片数据" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="物资编码：" prop="materialCode">
+            <el-input v-model="form.materialCode" placeholder="请输入物资编码" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="物资名称：" prop="materialName">
+            <el-input v-model="form.materialName" placeholder="请输入物资名称" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="仓库：" prop="warehouseName">
+            <el-input v-model="form.warehouseName" placeholder="请输入仓库名称" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="库存：" prop="stockQuantity">
+            <el-input v-model="form.stockQuantity" placeholder="请输入库存数量" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="规格：" prop="specification">
+            <el-input v-model="form.specification" placeholder="请输入规格" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="型号：" prop="model">
+            <el-input v-model="form.model" placeholder="请输入型号" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="分类名称：" prop="categoryName">
+            <el-input v-model="form.categoryName" placeholder="请输入分类名称" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="物资类型：" prop="materialType">
+            <el-input v-model="form.materialType" placeholder="请输入物资类型" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="计量单位名称：" prop="measurementUnit">
+            <el-input v-model="form.measurementUnit" placeholder="请输入计量单位名称" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="品牌名称：" prop="brandName">
+            <el-input v-model="form.brandName" placeholder="请输入品牌名称" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="长(cm)：" prop="lengthCm">
+            <el-input v-model="form.lengthCm" placeholder="请输入长度(cm)" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="宽(cm)：" prop="widthCm">
+            <el-input v-model="form.widthCm" placeholder="请输入宽度(cm)" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="高(cm)：" prop="heightCm">
+            <el-input v-model="form.heightCm" placeholder="请输入高度(cm)" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="体积(cm³)：" prop="volumeCm3">
+            <el-input v-model="form.volumeCm3" placeholder="请输入体积(cm³)" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="毛重(kg)：" prop="grossWeightKg">
+            <el-input v-model="form.grossWeightKg" placeholder="请输入毛重(kg)" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="净重(kg)：" prop="netWeightKg">
+            <el-input v-model="form.netWeightKg" placeholder="请输入净重(kg)" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="生产厂商：" prop="manufacturer">
+            <el-input v-model="form.manufacturer" placeholder="请输入生产厂商" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="库存预警推送人：" prop="stockWarningNotifier">
+            <el-input v-model="form.stockWarningNotifier" placeholder="请输入库存预警推送人" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="产地：" prop="origin">
+            <el-input v-model="form.origin" placeholder="请输入产地" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="状态：" prop="status">
+            <el-input v-model="form.status" placeholder="请输入状态" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="备注：" prop="remarks">
+            <el-input v-model="form.remarks" placeholder="请输入备注" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="库房：" prop="storageRoom">
+            <el-input v-model="form.storageRoom" placeholder="请输入库房" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="包装数量：" prop="packagingQuantity">
+            <el-input v-model="form.packagingQuantity" placeholder="请输入包装数量" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="包装体积(cm³)：" prop="packagingVolumeCm3">
+            <el-input v-model="form.packagingVolumeCm3" placeholder="请输入包装体积(cm³)" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="包装重量(kg)：" prop="packagingWeightKg">
+            <el-input v-model="form.packagingWeightKg" placeholder="请输入包装重量(kg)" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="价格：" prop="price">
+            <el-input v-model="form.price" placeholder="请输入价格" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="售卖价格：" prop="sellingPrice">
+            <el-input v-model="form.sellingPrice" placeholder="请输入售卖价格" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="价值：" prop="value">
+            <el-input v-model="form.value" placeholder="请输入价值" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="成本价格：" prop="costPrice">
+            <el-input v-model="form.costPrice" placeholder="请输入成本价格" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="适用灾种：" prop="applicableDisasterType">
+            <el-input v-model="form.applicableDisasterType" placeholder="请输入适用灾种" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="使用保养：" prop="usageAndMaintenance">
+            <el-input v-model="form.usageAndMaintenance" placeholder="请输入使用保养信息" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="供应商名称：" prop="supplierName">
+            <el-input v-model="form.supplierName" placeholder="请输入供应商名称" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="特殊运输要求：" prop="specialTransportRequirements">
+            <el-input v-model="form.specialTransportRequirements" placeholder="请输入特殊运输要求" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="材质：" prop="material">
+            <el-input v-model="form.material" placeholder="请输入材质" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="保质期：" prop="shelfLife">
+            <el-input v-model="form.shelfLife" placeholder="请输入保质期" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="库存预警数量：" prop="stockWarningQuantity">
+            <el-input v-model="form.stockWarningQuantity" placeholder="请输入库存预警数量" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="保质期到期预警天数：" prop="shelfLifeWarningDays">
+            <el-input v-model="form.shelfLifeWarningDays" placeholder="请输入保质期到期预警天数" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="使用预警推送人：" prop="shelfLifeWarningNotifier">
+            <el-input v-model="form.shelfLifeWarningNotifier" placeholder="请输入使用预警推送人" style="width: 468px !important" />
+          </el-form-item>
+        </el-form>
+        <div class="common-dialog-footer">
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确定</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, toRefs } from 'vue';
+const emits = defineEmits(['close']);
+const buttonLoading = ref(false);
+// 表单初始数据
+const initFormData = {
+  "materialImageData": '',
+  "materialCode": '',
+  "materialName": '',
+  "warehouseName": '',
+  "stockQuantity": '',
+  "specification": '',
+  "model": '',
+  "categoryName": '',
+  "materialType": '',
+  "measurementUnit": '',
+  "brandName": '',
+  "lengthCm": '',
+  "widthCm": '',
+  "heightCm": '',
+  "volumeCm3": '',
+  "grossWeightKg": '',
+  "netWeightKg": '',
+  "manufacturer": '',
+  "stockWarningNotifier": '',
+  "origin": '',
+  "status": '',
+  "remarks": '',
+  "storageRoom": '',
+  "packagingQuantity": '',
+  "packagingVolumeCm3": '',
+  "packagingWeightKg": '',
+  "price": '',
+  "sellingPrice": '',
+  "value": '',
+  "costPrice": '',
+  "applicableDisasterType": '',
+  "usageAndMaintenance": '',
+  "supplierName": '',
+  "specialTransportRequirements": '',
+  "material": '',
+  "shelfLife": '',
+  "stockWarningQuantity": '',
+  "shelfLifeWarningDays": '',
+  "shelfLifeWarningNotifier": ''
+};
+
+// 表单数据
+const data = reactive({
+  form: { ...initFormData },
+  rules: {
+    event_title: [{ required: true, message: '事件标题不能为空', trigger: 'blur' }],
+    event_type: [{ required: true, message: '事件类型不能为空', trigger: 'blur' }],
+    event_level: [{ required: true, message: '事件等级不能为空', trigger: 'blur' }],
+    event_status: [{ required: true, message: '事件状态不能为空', trigger: 'blur' }],
+    address: [{ required: true, message: '事件地点不能为空', trigger: 'blur' }],
+    event_time: [{ required: true, message: '事发时间不能为空', trigger: 'blur' }],
+    report_time: [{ required: true, message: '上报时间不能为空', trigger: 'blur' }],
+    event_source: [{ required: true, message: '事件来源不能为空', trigger: 'blur' }],
+    event_description: [{ required: true, message: '事件描述不能为空', trigger: 'blur' }],
+    contact: [{ required: true, message: '联系方式不能为空', trigger: 'blur' }]
+  }
+});
+
+const { form, rules } = toRefs(data);
+
+const closeDialog = () => {
+  emits('close');
+};
+const submitForm = () => {
+}
+</script>
+
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+  span {
+    white-space: nowrap;
+  }
+}
+</style>
+
+