App端 添加物资

packages/mobile/src/views/Material/MaterialManagement.vue

@@ -46,11 +46,112 @@
       position="bottom"
       closeable
       close-on-click-overlay
-      :style="{ height: '80%' }"
+      :style="{ height: '60%' }"
       @close="onPopupClose"
     >
-      <div class="popup-content">
+      <van-form class="materialAddForm" label-align="left" colon>
-        <h3>添加新物资</h3>
+        <h3>设备信息</h3>
+
+        <!-- 物资名称 -->
+        <van-field
+          v-model="form.wzmc"
+          label="物资名称"
+          placeholder="请输入物资名称"
+          :rules="[{ required: true, message: '请填写物资名称' }]"
+        >
+          <template #button>
+            <span class="counter">{{ form.wzmc.length }}/20</span>
+          </template>
+        </van-field>
+
+        <!-- 数量 -->
+        <van-field
+          v-model="form.sl"
+          label="数量"
+          placeholder="请输入数量"
+          type="number"
+          :rules="[{ required: true, message: '请填写物资数量' }]"
+        />
+
+        <!-- 单位 -->
+        <van-field v-model="form.dw" label="单位" placeholder="物资单位" />
+
+        <!-- 负责人 -->
+        <van-field
+          v-model="form.fzr"
+          label="负责人"
+          placeholder="请输入负责人"
+        />
+
+        <!-- 联系电话 -->
+        <van-field
+          v-model="form.lxdh"
+          label="联系电话"
+          placeholder="请输入联系电话"
+        />
+
+        <!-- 存放地点 -->
+        <van-field
+          v-model="form.cfdd"
+          label="存放地点"
+          placeholder="请输入存放地点"
+        />
+
+        <!-- 入库单位 -->
+        <van-field
+          v-model="form.rkdw"
+          label="入库单位"
+          placeholder="请输入入库单位"
+        />
+
+        <!-- 入库日期 -->
+        <van-field
+          v-model="form.rkrq"
+          is-link
+          arrow-direction="down"
+          readonly
+          label="入库日期"
+          placeholder="请选择日期"
+          @click="showTimePicker = true"
+        />
+
+        <!-- 入库日期弹窗 -->
+        <van-popup
+          :show="showTimePicker"
+          round
+          position="bottom"
+          close-on-click-overlay
+          @close="showTimePicker = false"
+        >
+          <van-date-picker
+            v-model="currentDate"
+            title="选择入库日期"
+            @confirm="onDateConfirm"
+            @cancel="showTimePicker = false"
+          />
+        </van-popup>
+      </van-form>
+      <div
+        style="
+          position: fixed;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          padding: 16px;
+          background: white;
+          box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+          z-index: 100;
+        "
+      >
+        <van-button
+          round
+          block
+          type="primary"
+          native-type="submit"
+          @click="handleSubmit"
+        >
+          保存
+        </van-button>
       </div>
     </van-popup>
   </div>
@@ -71,6 +172,22 @@ const searchValue = ref(""); // 搜索框输入值
 const showPopup = ref(false); // 控制弹出层显示隐藏
 const yhzDetail = ref({}); // 养护站详情数据
 const materialList = ref([]); // 物资列表数据
+const INIT_FORM = {
+  rid: "",
+  rkrq: "", // 入库日期
+  rkdw: "", // 入库单位
+  sl: 0, // 数量
+  dw: "", // 单位
+  cfdd: "", // 存放地点
+  fzr: "", // 负责人
+  lxdh: "", // 联系电话
+  ye: "", // 余量
+  qxmc: "", // 区县名称
+  wzmc: "", // 物资名称
+  fzrid: "", // 负责人id
+  yhzid: "", // 养护站id
+};
+const form = reactive({ ...INIT_FORM }); // 表单
 
 // 根据养护站rid获取物资列表
 const getMaterialList = async (wzmc) => {
@@ -106,9 +223,57 @@ const getMaterialList = async (wzmc) => {
 // 组件挂载时获取数据
 onMounted(() => {
   yhzDetail.value = JSON.parse(decodeURIComponent(route.params.data));
+  console.log("yhzDetail", toRaw(yhzDetail.value));
   getMaterialList();
 });
 
+// 购置日期
+const showTimePicker = ref(false);
+const currentDate = ref([
+  new Date().getFullYear(),
+  new Date().getMonth() + 1,
+  new Date().getDate(),
+]);
+const onDateConfirm = ({ selectedValues }) => {
+  form.rkrq = selectedValues.join("-");
+  showTimePicker.value = false;
+};
+
+const handleSubmit = async () => {
+  try {
+    showLoadingToast({
+      message: "正在保存",
+      forbidClick: true,
+      loadingType: "spinner",
+    });
+    form.yhzid = yhzDetail.value.id;
+    form.qxmc = yhzDetail.value.qxmc;
+    console.log("form", toRaw(form));
+    const res = await request({
+      url: "/snow-ops-platform/yjwz/add",
+      method: "post",
+      data: toRaw(form),
+    });
+    if (res.code && res.code === "00000") {
+      showToast({
+        type: "success",
+        message: "新增成功",
+      });
+      onPopupClose();
+      Object.assign(form, { ...INIT_FORM });
+      getMaterialList(searchValue.value);
+    } else {
+      throw new Error(res.message);
+    }
+  } catch (error) {
+    console.log(error);
+    showToast({
+      type: "error",
+      message: error.message || "新增失败",
+    });
+  }
+};
+
 watch(
   () => searchValue.value,
   (newVal, oldVal) => {
@@ -182,5 +347,9 @@ const onPopupClose = () => {
 .status-danger {
   background-color: #ee0a24;
 }
+
+.materialAddForm {
+  padding: 16px 16px 80px 16px;
+}
 </style>