feat 添加材料管理相关页面和组件，新增订单和详情页面，更新表单和列表功能

fuintAdmin/src/components/Paragraph/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="overview">
+    <div class="title">{{ title }}</div>
+    <div class="content" v-loading="loading">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Paragraph",
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.overview {
+  min-height: 270px;
+  background: #ffffff;
+  margin-bottom: 0px;
+  box-shadow: 0 1px 2px #d5d7d8;
+  .title {
+    margin: 10px 0px 0px 0px;
+    padding: 10px 0px 0px 10px;
+    height: 44px;
+    border: 1px solid #e2e1e1;
+    background: #f4f4f4;
+    color: #333;
+    font-weight: bold;
+  }
+  .content {
+    padding: 15px;
+    border: solid 1px #d5d7d8;
+    .date-picker {
+      margin-left: 5px;
+      float: left;
+      margin-right: 10px;
+    }
+    .do-search {
+      margin-top: 2px;
+      float: left;
+      .ex {
+        color: #666666;
+        font-size: 12px;
+        width: 60px;
+        margin-left: 20px;
+        cursor: pointer;
+      }
+      .ex:hover {
+        color: #ff5b57;
+        font-weight: bold;
+      }
+    }
+    .item {
+      display: block;
+      border-right: none;
+      border-bottom: none;
+      min-height: 100px;
+      padding: 6px;
+      text-align: center;
+      cursor: pointer;
+      .do {
+        border: solid 1px #cccccc;
+        padding: 20px;
+        border-radius: 2px;
+      }
+      .icon {
+        height: 40px;
+        width: 40px;
+        display: block;
+        padding: 5px;
+        float: left;
+        border: solid #8a8a8a 1px;
+        border-radius: 30px;
+      }
+      .text {
+        text-align: left;
+        margin: 0px;
+        text-indent: 10px;
+        font-size: 14px;
+      }
+      .number {
+        text-align: left;
+        margin: 0px;
+        font-weight: bold;
+        text-indent: 10px;
+        font-size: 18px;
+        color: #ff5b57;
+      }
+    }
+  }
+}
+</style>

fuintAdmin/src/views/login.vue

@@ -214,7 +214,7 @@ export default {
     right: 500px;
     top: 0;
     bottom: 0;
-    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
     overflow: hidden;
     background-size: cover;
     background-repeat: no-repeat;

fuintAdmin/src/views/material/list/add.vue

@@ -1,13 +1,43 @@
 <template>
-  <div>新增</div>
+  <div class="app-container">
+    <Paragraph title="基础信息">
+      <template>
+        <FormUI ref="formUI" />
+        <el-row type="flex" class="row-bg" justify="center">
+          <el-col :span="8">
+            <el-button size="mini" @click="handleCancel">取消添加</el-button>
+            <el-button type="primary" size="mini" @click="handleSubmit"
+              >确认保存</el-button
+            >
+          </el-col>
+        </el-row>
+      </template>
+    </Paragraph>
+  </div>
 </template>
 <script>
+import FormUI from "./formUI.vue";
+import Paragraph from "@/components/Paragraph";
 export default {
   name: "Add",
+  components: { FormUI, Paragraph },
   props: {},
   data() {
     return {};
   },
-  methods: {},
+  methods: {
+    handleCancel() {
+      this.$store.dispatch("tagsView/delView", this.$route);
+      this.$router.push({ path: "/material/list" });
+    },
+    async handleSubmit() {
+      await this.$refs.formUI.validate();
+    },
+  },
 };
 </script>
+<style lang="scss" scoped>
+.container {
+  width: 60%;
+}
+</style>

fuintAdmin/src/views/material/list/formUI.vue

@@ -1,11 +1,90 @@
-<template></template>
+<template>
+  <el-form
+    ref="form"
+    :model="form"
+    :disabled="disabled"
+    size="mini"
+    label-width="100px"
+  >
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="材料名称" prop="name" required>
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="原材料编号" required>
+          <el-input v-model="form.name1"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="规格" required>
+          <el-input v-model="form.name2"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="入库数量" required>
+          <el-input v-model="form.name3"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="保质期" required>
+          <el-input v-model="form.name4"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="单位" required>
+          <el-input v-model="form.name5"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="采购期数" required>
+          <el-input v-model="form.name6"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="商品类别" required>
+          <el-input v-model="form.name7"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="材料图片" required>
+          <ImageUpload :isShowTip="false" :limit="1" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
 <script>
+import ImageUpload from "@/components/ImageUpload";
 export default {
   name: "FormUI",
-  props: {},
+  props: {
+    form: {
+      type: Object,
+      default: () => ({}),
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: { ImageUpload },
   data() {
     return {};
   },
-  methods: {},
+  methods: {
+    validate() {
+      return new Promise((resolve, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            resolve();
+          } else {
+            reject();
+          }
+        });
+      });
+    },
+  },
 };
 </script>

fuintAdmin/src/views/material/list/index.vue

@@ -29,7 +29,9 @@
         </el-form-item>
       </template>
       <template #extendButton>
-        <el-button type="primary" plain icon="el-icon-plus">新增材料</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd"
+          >新增材料</el-button
+        >
       </template>
       <template #default>
         <el-table-column label="序号" prop="id" min-width="80" />
@@ -67,6 +69,9 @@ export default {
   },
   methods: {
     async getList() {},
+    handleAdd() {
+      this.$router.push({ path: "/material/list/add" });
+    },
   },
 };
 </script>

fuintAdmin/src/views/material/order/add.vue

@@ -0,0 +1,6 @@
+<template></template>
+<script>
+export default {
+  name: "OrderAdd",
+};
+</script>

fuintAdmin/src/views/material/order/detail.vue

@@ -0,0 +1,6 @@
+<template></template>
+<script>
+export default {
+  name: "OrderDetail",
+};
+</script>

fuintAdmin/src/views/material/order/index.vue

@@ -1,10 +1,61 @@
 <template>
-  <div>订单</div>
+  <div>
+    <Page>
+      <template #search="{ form, search }">
+        <el-form-item label="订单编号" prop="name">
+          <el-input
+            v-model="form.name"
+            placeholder="请输入名称"
+            clearable
+            size="small"
+            @keyup.enter.native="search"
+          />
+        </el-form-item>
+        <el-form-item label="时间" prop="time">
+          <el-input
+            v-model="form.status"
+            placeholder="请输入订单号"
+            clearable
+            @keyup.enter.native="search"
+          />
+        </el-form-item>
+      </template>
+      <template #extendButton>
+        <el-button type="primary" plain icon="el-icon-plus">新增订单</el-button>
+      </template>
+      <template #default>
+        <el-table-column label="序号" prop="id" min-width="80" />
+        <el-table-column label="订单编号" prop="1" min-width="80" />
+        <el-table-column label="采购方" prop="3" min-width="80" />
+        <el-table-column label="联系方式" prop="2" min-width="80" />
+        <el-table-column label="负责人" prop="4" min-width="80" />
+        <el-table-column label="商品采购总数" prop="5" min-width="100" />
+        <el-table-column label="采购总斤数" prop="6" min-width="100" />
+        <el-table-column label="总价" prop="7" min-width="80" />
+        <el-table-column label="支付金额" prop="8" min-width="80" />
+        <el-table-column label="支付方式" prop="9" min-width="80" />
+        <el-table-column label="支付金额" prop="10" min-width="80" />
+        <el-table-column label="采购时间" prop="11" min-width="80" />
+        <el-table-column label="录入时间" prop="12" min-width="80" />
+        <el-table-column label="操作" align="left" width="130" fixed="right">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text">详情</el-button>
+            <el-button size="mini" type="text" icon="el-icon-edit"
+              >修改</el-button
+            >
+          </template>
+        </el-table-column>
+      </template>
+    </Page>
+  </div>
 </template>
 <script>
+import Page from "@/components/Page";
 export default {
   name: "MaterialOrder",
-  components: {},
+  components: {
+    Page,
+  },
   data() {
     return {};
   },