完成仓库模块

src/views/system/Sdb/ChargeItem/add.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="AddBuildingBox">
+    <PageHeader></PageHeader>
+    <div class="AddBuildingBody">
+      <div class="title">基本信息</div>
+      <div class="addBuildingFormBody">
+        <el-form class="formBody" label-position="right" ref="formRef" :model="form" :rules="rules" label-width="130px">
+          <el-form-item label="项目名称" prop="materialName">
+            <span>{{ form.materialName }}</span>
+          </el-form-item>
+          <el-form-item label="品牌" prop="brand">
+            <span>{{ form.brand }}</span>
+          </el-form-item>
+          <el-form-item label="规格型号" prop="model">
+            <span>{{ form.model }}</span>
+          </el-form-item>
+          <el-form-item label="计量单位" prop="unit">
+            <span>{{ form.unit }}</span>
+          </el-form-item>
+          <el-form-item label="成本" prop="unit">
+            <span>{{ form.unit }}</span>
+            <el-input v-model.trim="form.remark" placeholder="请输入成本" />
+          </el-form-item>
+          <el-form-item label="当前库存" prop="unit">
+            <span>{{ form.unit }}</span>
+            <el-input v-model.trim="form.remark" placeholder="请输入当前库存" />
+          </el-form-item>
+
+          <el-form-item style="margin-top: 30px">
+            <el-button type="primary" @click="submitForm">提交</el-button>
+            <el-button @click="cancelForm">返回</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import PageHeader from '@/components/Pageheader/index.vue';
+import { getMaterial, updateMaterial, addMaterial } from '@/api/system/Tmaterial';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const router = useRouter();
+const route = useRoute();
+
+const formRef = ref();
+const form = ref({
+  id: null,
+  materialName: '', // 物料名称
+  brand: '', // 联系电话
+  model: '', // 邮箱
+  unit: '', // 地址
+  remark: '' // 备注
+});
+const rules = ref({
+  materialName: [{ required: true, message: '请输入 物料名称', trigger: 'blur' }],
+  brand: [{ required: true, message: '请输入 品牌', trigger: 'blur' }],
+  model: [{ required: true, message: '请输入 规格型号', trigger: 'blur' }],
+  unit: [{ required: true, message: '请输入 计量单位', trigger: 'blur' }]
+});
+const userid = ref(null);
+if (route.query.id) {
+  userid.value = route.query.id;
+  getMaterial(userid.value).then((res) => {
+    form.value = {
+      id: res.data.id,
+      materialName: res.data.materialName,
+      brand: res.data.brand,
+      model: res.data.model,
+      unit: res.data.unit,
+      remark: res.data.remark
+    };
+  });
+}
+// !== 提交 =============================================================================
+// 提交
+const submitForm = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      if (userid.value) {
+        updateMaterial(form.value).then((res) => {
+          ElMessage.success('编辑成功');
+          cancelForm();
+        });
+      } else {
+        addMaterial(form.value).then((res) => {
+          ElMessage.success('添加成功');
+          cancelForm();
+        });
+      }
+    }
+  });
+};
+// 推出
+const cancelForm = () => {
+  router.back();
+};
+</script>
+
+<style scoped lang="scss">
+.AddBuildingBox {
+  padding: 15px;
+  height: 100%;
+  width: 100%;
+}
+.AddBuildingBody {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: white;
+  padding: 15px;
+  .title {
+    height: 40px;
+    line-height: 40px;
+    padding-left: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    border-bottom: 1px solid #bbbbbb;
+    margin-bottom: 60px;
+  }
+
+  .formBody {
+    width: 650px;
+    margin: 0 auto;
+    &:deep(.el-form-item__content, .el-select, .el-input) {
+      width: 350px !important;
+      margin-right: 10px;
+      .el-cascader {
+        width: 100%;
+      }
+    }
+    .el-form-item {
+      margin-bottom: 20px;
+      align-items: center;
+    }
+    .el-button {
+      width: 80px;
+      height: 35px;
+      margin-right: 20px;
+    }
+  }
+}
+</style>