完成仓库模块

src/views/system/warehouse/Supplier/addSupplier.vue

@@ -0,0 +1,155 @@
+<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="supplierName">
+            <el-input v-model.trim="form.supplierName" placeholder="请输入供应商名称" />
+          </el-form-item>
+          <el-form-item label="联系人" prop="contactPerson">
+            <el-input v-model.trim="form.contactPerson" placeholder="请输入联系人" />
+          </el-form-item>
+          <el-form-item label="联系电话" prop="contactPhone">
+            <el-input v-model.trim="form.contactPhone" placeholder="请输入联系电话" />
+          </el-form-item>
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model.trim="form.email" placeholder="请输入邮箱" />
+          </el-form-item>
+          <el-form-item label="地址" prop="address">
+            <el-input v-model.trim="form.address" placeholder="请输入地址" />
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input type="textarea" :rows="5" 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 { getSupplier, updateSupplier, addSupplier } from '@/api/system/Tsupplier';
+import { validator } from '@/utils/Reg';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const router = useRouter();
+const route = useRoute();
+
+const formRef = ref();
+const form = ref({
+  id: null,
+  supplierName: '', // 供应商名称
+  contactPhone: '', // 联系电话
+  email: '', // 邮箱
+  address: '', // 地址
+  remark: '', // 备注
+  contactPerson: '' // 联系人
+});
+const rules = ref({
+  supplierName: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }],
+  contactPhone: [{ required: true, message: '请输入 联系电话', trigger: 'blur' }],
+  contactPerson: [{ required: true, message: '请输入 联系人', trigger: 'blur' }],
+  email: [
+    { required: true, message: '请输入 邮箱', trigger: 'blur' },
+    {
+      validator: (_, value) => validator(value, 'email'),
+      required: false,
+      message: '请输入正确的邮箱格式',
+      trigger: 'blur'
+    }
+  ]
+});
+const userid = ref(null);
+if (route.query.id) {
+  userid.value = route.query.id;
+  getSupplier(userid.value).then((res) => {
+    form.value = {
+      id: res.data.id,
+      supplierName: res.data.supplierName,
+      contactPhone: res.data.contactPhone,
+      email: res.data.email,
+      address: res.data.address,
+      remark: res.data.remark,
+      contactPerson: res.data.contactPerson
+    };
+  });
+}
+// !== 提交 =============================================================================
+// 提交
+const submitForm = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      if (userid.value) {
+        updateSupplier(form.value).then((res) => {
+          ElMessage.success('编辑成功');
+          cancelForm();
+        });
+      } else {
+        addSupplier(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>