2022.8.15

resources/frontend/src/App.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="app">
-    <router-view />
+    <keep-alive>
+      <router-view v-if="$route.meta.keepAlive" />
+    </keep-alive>
+    <router-view v-if="!$route.meta.keepAlive" />
   </div>
 </template>
 <script>

resources/frontend/src/api/goods.js

@@ -32,11 +32,11 @@ export function goodsList(params) {
   });
 }
 // 更新商品
-export function updateGoods(id, params) {
+export function updateGoods(id, data) {
   return http({
     url: `/api/goods_skus/${id}`,
     method: "patch",
-    params,
+    data,
   });
 }
 

resources/frontend/src/router/index1.js

@@ -12,6 +12,9 @@ const list = [
         path: "GOODS_LIST",
         name: "商品列表",
         component: () => import("../views/yingyeting/yingyeting.vue"),
+        meta: {
+          keepAlive: true,
+        },
       },
       {
         path: "GOODS_TYPE",

resources/frontend/src/views/brand/brand.vue

@@ -28,11 +28,15 @@
       </el-table>
     </div>
 
-    <!-- 新增种类对话框 -->
+    <!-- 新增品牌对话框 -->
-    <el-dialog title="新增品牌" :visible.sync="dialogFormVisible">
+    <el-dialog
+      title="新增品牌"
+      :visible.sync="dialogFormVisible"
+      :close-on-click-modal="false"
+    >
       <el-form :model="form">
         <el-form-item label="商品品牌" :label-width="formLabelWidth">
-          <el-input v-model="form.kindName" autocomplete="off"></el-input>
+          <el-input v-model="form.kindName"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -42,10 +46,14 @@
     </el-dialog>
 
     <!-- 编辑 -->
-    <el-dialog title="编辑" :visible.sync="dialogFormVisible1">
+    <el-dialog
+      title="编辑"
+      :visible.sync="dialogFormVisible1"
+      :close-on-click-modal="false"
+    >
       <el-form :model="form1">
-        <el-form-item label="编辑种类" :label-width="formLabelWidth1">
+        <el-form-item label="编辑品牌" :label-width="formLabelWidth1">
-          <el-input v-model="form1.kindName1" autocomplete="off"></el-input>
+          <el-input v-model="form1.kindName1"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">

resources/frontend/src/views/home/home.vue

@@ -30,7 +30,11 @@
     </div>
 
     <!-- 新增种类对话框 -->
-    <el-dialog title="新增" :visible.sync="dialogFormVisible">
+    <el-dialog
+      title="新增"
+      :visible.sync="dialogFormVisible"
+      :close-on-click-modal="false"
+    >
       <el-form :model="form">
         <el-form-item label="商品种类" :label-width="formLabelWidth">
           <el-input v-model="form.kindName" autocomplete="off"></el-input>
@@ -43,7 +47,11 @@
     </el-dialog>
 
     <!-- 编辑 -->
-    <el-dialog title="编辑" :visible.sync="dialogFormVisible1">
+    <el-dialog
+      title="编辑"
+      :visible.sync="dialogFormVisible1"
+      :close-on-click-modal="false"
+    >
       <el-form :model="form1">
         <el-form-item label="编辑种类" :label-width="formLabelWidth1">
           <el-input v-model="form1.kindName1" autocomplete="off"></el-input>

resources/frontend/src/views/index.vue

@@ -112,6 +112,7 @@ export default {
     // table构造
     $route: {
       handler: function (val) {
+        console.log("0.0", val);
         this.titie = val.matched;
         this.head = val.name;
         this.levelData.push({ name: val.name, path: val.path });
@@ -125,6 +126,7 @@ export default {
         }
 
         this.levelData = newArr;
+        console.log("table构造", this.levelData);
       },
       deep: true,
       immediate: true,

resources/frontend/src/views/shuju/record.vue

@@ -46,14 +46,16 @@
 
     <!-- 表格 -->
     <el-card style="margin-top: 30px" class="box-card">
-      <el-table :data="tableData" style="width: 100%">
+      <el-table :data="tableData" style="width: 100%" border>
-        <el-table-column prop="id" label="序号" width="100"> </el-table-column>
+        <el-table-column prop="id" label="序号" width="70"> </el-table-column>
         <el-table-column prop="created_at" label="时间" width="200">
         </el-table-column>
         <el-table-column prop="target_field" label="类别" width="100">
         </el-table-column>
-        <el-table-column prop="before_update" label="操作前"> </el-table-column>
+        <el-table-column prop="before_update" label="操作前" :resizable="ture">
-        <el-table-column prop="after_update" label="操作后"> </el-table-column>
+        </el-table-column>
+        <el-table-column prop="after_update" label="操作后" :resizable="ture">
+        </el-table-column>
         <el-table-column prop="user.name" label="操作人" width="100">
         </el-table-column>
       </el-table>
@@ -121,7 +123,7 @@ export default {
     getList() {
       let queryData = {
         userId: this.form.userId,
-        targetField: this.form.targetField,
+        target_field: this.form.targetField,
         moudule: this.moudule,
         target_id: this.$route.query.id,
         startTime: this.value1[0],
@@ -161,7 +163,7 @@ export default {
       console.log(this.form.userId, this.form.targetField);
       let queryData = {
         userId: this.form.userId,
-        targetField: this.form.targetField,
+        target_field: this.form.targetField,
         page: this.current_page,
         per_page: this.per_page,
         moudule: this.moudule,
@@ -169,7 +171,26 @@ export default {
         startTime: this.value1[0],
         endTime: this.value1[1],
       };
-      recordList(queryData).then((res) => {
+
+      // 对象值为空清除
+      const newObj = filterParams(queryData);
+      function filterParams(obj) {
+        const _newPar = {};
+        for (const key in obj) {
+          // 如果对象属性的值不为空，就保存该属性（这里我做了限制，如果属性的值为0，保存该属性。如果属性的值全部是空格，属于为空。）
+          if (
+            (obj[key] === 0 || obj[key]) &&
+            obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
+          ) {
+            // 记录属性
+            _newPar[key] = obj[key];
+          }
+        }
+        // 返回对象
+        return _newPar;
+      }
+
+      recordList(newObj).then((res) => {
         this.tableData = res.data.data;
         this.Paginationdata = res.data.meta;
       });

resources/frontend/src/views/store/store.vue

@@ -23,7 +23,11 @@
     </div>
 
     <!-- 新增店铺 -->
-    <el-dialog title="新增店铺" :visible.sync="dialogFormVisible">
+    <el-dialog
+      title="新增店铺"
+      :visible.sync="dialogFormVisible"
+      :close-on-click-modal="false"
+    >
       <el-form :model="form">
         <el-form-item label="店铺名称">
           <el-input v-model="form.name" placeholder="输入店铺名称"></el-input>

resources/frontend/src/views/system/role.vue

@@ -7,7 +7,12 @@
 
     <!-- 点击新增弹出表单 -->
     <div class="from">
-      <el-dialog title="新增角色" :visible.sync="dialogVisible2" width="30%">
+      <el-dialog
+        title="新增角色"
+        :visible.sync="dialogVisible2"
+        width="30%"
+        :close-on-click-modal="false"
+      >
         <div>
           <el-form label-width="80px">
             <el-form-item label="角色名称">
@@ -31,7 +36,9 @@
         <el-table-column prop="name" label="角色名称"> </el-table-column>
         <el-table-column label="权限内容">
           <template slot-scope="scope">
-            {{ scope.row.permissions.join(",") }}
+            <span v-for="item in scope.row.permissions" :key="item.id"
+              >{{ item.name }}&nbsp;&nbsp;</span
+            >
           </template>
         </el-table-column>
         <el-table-column label="操作">
@@ -43,8 +50,14 @@
     </div>
 
     <!-- 点击编辑弹出权限框 -->
-    <el-dialog title="编辑权限" :visible.sync="dialogVisible" width="30%">
+    <el-dialog
+      title="编辑权限"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :close-on-click-modal="false"
+    >
       <el-tree
+        v-if="isShowtree"
         :data="Role_Permission"
         show-checkbox
         :default-expand-all="false"
@@ -52,12 +65,13 @@
         ref="tree"
         highlight-current
         :props="defaultProps"
+        :default-checked-keys="chekedKeys"
         v-model="permissionIds"
       >
       </el-tree>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button @click="cancel()">取 消</el-button>
-        <el-button type="primary" @click="getCheckedKeys">确 定</el-button>
+        <el-button type="primary" @click="getCheckedKeys()">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -75,6 +89,7 @@ export default {
     return {
       id: "", //点击角色的id
       tableList: [], //列表数据
+      rolePermissions: [],
       newrole: "", //添加角色框input
       dialogVisible: false, //编辑按钮打开表单变量
       dialogVisible2: false, //新增按钮打开表单变量
@@ -85,18 +100,21 @@ export default {
         children: "children",
         label: "name",
       },
+      isShowtree: false,
+      chekedKeys: [],
     };
   },
+
   mounted() {
     this.getroleList();
+    this.getJurisdiction();
   },
   methods: {
     //角色表单数据请求
     getroleList() {
-      this.getJurisdiction();
       roleList().then((res) => {
-        console.log(res);
         this.tableList = res.data.data;
+        console.log("我是角色权限", this.tableList);
       });
     },
 
@@ -104,6 +122,7 @@ export default {
     getJurisdiction() {
       jurisdiction().then((res) => {
         this.Role_Permission = res.data.data;
+        console.log("我是所有权限", this.Role_Permission);
       });
     },
 
@@ -126,8 +145,20 @@ export default {
 
     // 点击编辑
     onEdit(row) {
-      this.dialogVisible = true;
       this.id = row.id;
+      console.log(row);
+      let arr = row.permissions.map((item) => {
+        return item.id;
+      });
+      this.chekedKeys = arr;
+      this.dialogVisible = true;
+      this.isShowtree = true;
+    },
+
+    // 点击取消
+    cancel() {
+      this.dialogVisible = false;
+      this.isShowtree = false;
     },
 
     //编辑权限确认

resources/frontend/src/views/users/users.vue

@@ -7,7 +7,12 @@
 
     <!-- 点击新增弹出表单 -->
     <div class="from">
-      <el-dialog title="新增用户" :visible.sync="dialogVisible" width="30%">
+      <el-dialog
+        title="新增用户"
+        :visible.sync="dialogVisible"
+        width="30%"
+        :close-on-click-modal="false"
+      >
         <div>
           <el-form label-width="80px">
             <el-form-item label="姓名">
@@ -46,7 +51,12 @@
 
     <!-- 点击编辑弹出表单信息 -->
     <div class="edit_from">
-      <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
+      <el-dialog
+        title="编辑"
+        :visible.sync="editVisible"
+        width="30%"
+        :close-on-click-modal="false"
+      >
         <div>
           <el-form label-width="80px">
             <el-form-item label="ID">

resources/frontend/src/views/yingyeting/addgoods/addgoods.vue

@@ -8,7 +8,7 @@
         >
           <div>
             <div style="font-size: 14px">商品列表：</div>
-            <el-select v-model="lid" placeholder="选择商品">
+            <el-select v-model="lid" placeholder="选择商品" @change="onchange">
               <el-option
                 v-for="item in goodschoose"
                 :key="item.id"
@@ -40,6 +40,7 @@
                class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload> -->
         </div>
+
         <!-- 编辑按钮进入显示 -->
         <el-form ref="form" :inline="true" :model="form" v-if="goodsData != ''">
           <div>
@@ -133,16 +134,47 @@
         <el-form ref="form" :inline="true" :model="form" v-if="goodsData == ''">
           <div>
             <el-form-item label="商品名称：">
-              <el-input placeholder="商品名称" v-model="form.title"></el-input>
+              <el-input
+                placeholder="商品名称"
+                v-model="form.title"
+                :disabled="true"
+                v-if="isShow"
+              ></el-input>
+              <el-input
+                placeholder="商品名称"
+                v-model="form.title"
+                v-else
+              ></el-input>
             </el-form-item>
             <el-form-item label="商品编码：">
               <el-input
                 placeholder="商品编码"
                 v-model="form.goods_code"
+                :disabled="true"
+                v-if="isShow"
+              ></el-input>
+              <el-input
+                placeholder="商品编码"
+                v-model="form.goods_code"
+                v-else
               ></el-input>
             </el-form-item>
             <el-form-item label="商品种类：">
-              <el-select v-model="form.type_id" placeholder="商品种类">
+              <el-select
+                v-model="form.type_id"
+                placeholder="商品种类"
+                v-if="isShow"
+                :disabled="true"
+              >
+                <el-option
+                  v-for="item in cate"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+              <el-select v-model="form.type_id" placeholder="商品种类" v-else>
                 <el-option
                   v-for="item in cate"
                   :key="item.id"
@@ -153,7 +185,21 @@
               </el-select>
             </el-form-item>
             <el-form-item label="商品品牌：">
-              <el-select v-model="form.brand_id" placeholder="商品品牌">
+              <el-select
+                v-model="form.brand_id"
+                placeholder="商品品牌"
+                v-if="isShow"
+                :disabled="true"
+              >
+                <el-option
+                  v-for="item in brand"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+              <el-select v-model="form.brand_id" placeholder="商品品牌" v-else>
                 <el-option
                   v-for="item in brand"
                   :key="item.id"
@@ -223,11 +269,11 @@ import {
   updateGoods,
 } from "../../../api/goods.js";
 import { goods_types, Brand_goods_types } from "../../../api/rankingData.js";
-import axios from "axios";
 export default {
   components: {
     UploadTem,
   },
+
   data() {
     return {
       gallery: "",
@@ -276,6 +322,7 @@ export default {
         },
       ],
       file: [],
+      isShow: false,
     };
   },
 
@@ -294,6 +341,7 @@ export default {
       immediate: true, // 第一次改变就执行
     },
   },
+
   methods: {
     // 查看一个商品
     handleUpdate() {
@@ -319,47 +367,41 @@ export default {
     handleList() {
       goodsList().then((res) => {
         this.goodschoose = res.data.data;
+        this.goodschoose = [
+          {
+            title: "",
+            id: "",
+          },
+          ...this.goodschoose,
+        ];
+        console.log(this.goodschoose);
       });
     },
 
     // 添加商品
     handleSave() {
       const goods = this.form;
-      // const sku2 = this.skus[0];
-      // const skus = [];
-      // skus.push(sku2);
-      // console.log(goods, skus);
-
       const skus = this.skus;
-
       const updata = {
         ...goods,
         goods_id: this.lid,
         skus: skus,
       };
-      // console.log(updata);
+      addGoods(updata).then((res) => {
-      let token = localStorage.getItem("token");
+        if (res.statusText === "OK") {
-      axios
+          this.$message({
-        .post("/api/goods", updata, {
+            message: "商品添加成功！",
-          headers: {
+            type: "success",
-            Authorization: `Bearer ${token}`,
+          });
-          },
+          this.updateForm();
-        })
+          this.$router.push("/GOODS_LIST");
-        .then((res) => {
+        } else {
-          if (res.statusText === "OK") {
+          this.$message({
-            this.$message({
+            message: "商品添加失败！",
-              message: "商品添加成功！",
+            type: "error",
-              type: "success",
+          });
-            });
+        }
-            this.updateForm();
+      });
-            this.$router.push("GOODS_LIST");
-          } else {
-            this.$message({
-              message: "商品添加失败！",
-              type: "error",
-            });
-          }
-        });
     },
 
     // 修改成功后重置表单
@@ -415,16 +457,19 @@ export default {
     // 商品列表页进入带数据表单
     getgoodsidData() {
       let id = this.bigID;
-      let token = localStorage.getItem("token");
+      // let token = localStorage.getItem("token");
-      axios
+      // axios
-        .get(`/api/goods_skus/${id}`, {
+      //   .get(`/api/goods_skus/${id}`, {
-          headers: {
+      //     headers: {
-            Authorization: `Bearer ${token}`,
+      //       Authorization: `Bearer ${token}`,
-          },
+      //     },
-        })
+      //   })
-        .then((res) => {
+      //   .then((res) => {
-          this.goodsData = res.data.data;
+      //     this.goodsData = res.data.data;
-        });
+      //   });
+      checkGoods(id).then((res) => {
+        this.goodsData = res.data.data;
+      });
     },
 
     // 移除商品图片
@@ -433,8 +478,8 @@ export default {
     // 编辑确认请求
     Edititem() {
       let id = this.bigID;
-      console.log("ID", id);
+      // console.log("ID", id);
-      console.log("goodsid", this.goodsData.goods_id);
+      // console.log("goodsid", this.goodsData.goods_id);
       let goods = {
         title: this.goodsData.goods.title,
         img_url: this.goodsData.goods.img_url,
@@ -456,34 +501,39 @@ export default {
       } else if (sku.status == "预警") {
         sku.status = 2;
       }
-      let data = {
+      let updateData = {
         goods_id: this.goodsData.goods_id,
         goods,
         sku,
       };
-      console.log(data);
+      updateGoods(id, updateData).then((res) => {
-      let token = localStorage.getItem("token");
+        this.$message({
-      axios
+          message: "商品编辑成功！",
-        .patch(`/api/goods_skus/${id}`, data, {
+          type: "success",
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        })
-        .then((res) => {
-          console.log(res);
         });
+        this.$router.push("/GOODS_LIST");
+      });
     },
 
     // 取消按钮
     cancel() {
       this.$router.push("/GOODS_LIST");
     },
+
+    onchange(value) {
+      console.log(value);
+      if (value !== "") {
+        this.isShow = true;
+      }
+      if (value === "") {
+        this.isShow = false;
+        this.form = {};
+      }
+    },
   },
   created() {
     this.goodsID = sessionStorage.getItem("商品ID");
     this.bigID = sessionStorage.getItem("ID");
-    // console.log("商品ID", this.goodsID);
-    // console.log("ID", this.bigID);
     this.getgoodsidData();
   },
   mounted() {

resources/frontend/src/views/yingyeting/yingyeting.vue

@@ -77,10 +77,8 @@
             <el-button type="primary" plain @click="addNewgoods"
               >新建商品</el-button
             >
-            <el-button type="primary" plain @click="dialogVisible = true"
+            <el-button type="primary" plain @click="update()">上新</el-button>
-              >上新</el-button
+            <el-button type="primary" plain @click="onCount()"
-            >
-            <el-button type="primary" plain @click="dialogVisible2 = true"
               >库存盘点</el-button
             >
             <el-button type="primary" plain @click="handleImport()"
@@ -92,26 +90,12 @@
           </div>
         </div>
 
-        <!-- 点击上新弹出确认框 -->
-        <el-dialog :visible.sync="dialogVisible" width="20%">
-          <span>您确定要上新吗?</span>
-          <span slot="footer" class="dialog-footer">
-            <el-button @click="dialogVisible = false">取 消</el-button>
-            <el-button type="primary" @click="update()">确 定</el-button>
-          </span>
-        </el-dialog>
-
-        <!-- 点击库存盘点弹出确认框 -->
-        <el-dialog :visible.sync="dialogVisible2" width="20%">
-          <span>您确定要开始库存盘点吗?</span>
-          <span slot="footer" class="dialog-footer">
-            <el-button @click="dialogVisible2 = false">取 消</el-button>
-            <el-button type="primary" @click="onCount()">确 定</el-button>
-          </span>
-        </el-dialog>
-
         <!-- 参考售价弹出确认框 -->
-        <el-dialog :visible.sync="dialogVisible3" width="20%">
+        <el-dialog
+          :visible.sync="dialogVisible3"
+          width="20%"
+          :close-on-click-modal="false"
+        >
           <span>您确定要修改吗?</span>
           <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible3 = false">取 消</el-button>
@@ -122,7 +106,11 @@
         </el-dialog>
 
         <!-- 预留量弹出框 -->
-        <el-dialog :visible.sync="dialogVisible4" width="20%">
+        <el-dialog
+          :visible.sync="dialogVisible4"
+          width="20%"
+          :close-on-click-modal="false"
+        >
           <span>您确定要修改吗?</span>
           <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible4 = false">取 消</el-button>
@@ -133,7 +121,12 @@
         </el-dialog>
 
         <!-- 点击表格导出弹出框 -->
-        <el-dialog title="表格导出" :visible.sync="Tableexport" width="30%">
+        <el-dialog
+          title="表格导出"
+          :visible.sync="Tableexport"
+          width="30%"
+          :close-on-click-modal="false"
+        >
           <div>
             选择:
             <template>
@@ -165,6 +158,7 @@
           size="20%"
           width="30%"
           @close="importForm.imFileList = []"
+          :close-on-click-modal="false"
         >
           <div class="demo-drawer__content">
             <el-form :model="importForm" :rules="improtRules" ref="importForm">
@@ -464,13 +458,18 @@
         </el-table>
       </div>
 
-      <!-- 确定按钮 -->
+      <!-- 底部按钮 -->
-      <el-button type="primary" class="confirmbtn" @click="onSubmit()"
+      <div class="footerBtn" v-show="isShow || stock">
-        >确定</el-button
+        <el-button type="primary" class="confirmbtn" @click="cancel()"
-      >
+          >取消</el-button
+        >
+        <el-button type="primary" class="confirmbtn" @click="onSubmit()"
+          >保存</el-button
+        >
+      </div>
 
       <!-- 分页功能 -->
-      <div class="block">
+      <div class="page">
         <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
@@ -669,7 +668,7 @@ export default {
 
     // 点击上新
     update() {
-      this.dialogVisible = false;
+      // this.dialogVisible = false;
       this.isShow = true;
       this.updateType = "newest";
       this.stock = false;
@@ -699,6 +698,13 @@ export default {
       this.getList();
     },
 
+    //取消上新or库存盘点
+    cancel() {
+      this.isShow = false;
+      this.stock = false;
+      this.getList();
+    },
+
     // 点击上新or库存盘点后确认
     onSubmit() {
       //判断点击的是上新，再发送上新请求
@@ -863,7 +869,6 @@ export default {
 
     // 点击记录按钮跳转商品记录
     goodslog(row) {
-      console.log(row.id);
       this.$router.push({
         path: "/GOODS_LOG",
         query: {
@@ -916,20 +921,11 @@ export default {
       this.id = "";
     },
 
-    // 预留量  失去焦点修改
+    // 预留量  失去焦点触发确认框
     reservebBlur(row) {
       this.reserve = row.reserve;
       this.dialogVisible4 = true;
-      // let reservebData = {
+      this.publicId = row.id;
-      //   updateField: this.updateField,
-      //   reserve: row.reserve,
-      // };
-      // singleUpdate(row.id, reservebData).then((res) => {
-      //   this.$message({
-      //     message: "预留量修改成功！",
-      //     type: "success",
-      //   });
-      // });
     },
 
     // 预留量弹出框确认请求
@@ -938,8 +934,8 @@ export default {
         updateField: this.updateField,
         reserve: this.reserve,
       };
-      this;
       singleUpdate(this.publicId, reservebData).then((res) => {
+        this.id1 = "";
         this.dialogVisible4 = false;
         this.$message({
           message: "预留量修改成功！",
@@ -951,20 +947,21 @@ export default {
     loss(id) {
       this.updateField = "loss_num";
       this.id2 = id;
+      this.id = "";
+      this.id1 = "";
     },
 
     // 添加损耗
     onLoss(row) {
-      // console.log(this.radio);
-      // console.log(row);
-      // console.log(row.id);
       let id = row.id;
+      console.log(id);
       let lossData = {
         updateField: this.updateField,
         reason: this.radio,
         loss_num: row.daily.loss_num,
       };
       singleUpdate(id, lossData).then((res) => {
+        this.id2 = "";
         this.$message({
           message: "损耗添加成功！",
           type: "success",
@@ -1046,10 +1043,8 @@ export default {
   width: 14px;
   height: 14px;
 }
-</style>
 
-<!-- <style>
+.page {
-.el-form--inline .el-form-item {
+  margin-top: 20px;
-  margin-right: 30px;
 }
-</style> -->
+</style>