物资画面做成

src/views/spares/material.vue

@@ -8,8 +8,7 @@
                :before-open="beforeOpen"
                v-model="form"
                ref="crud"
-               @row-update="rowUpdate"
+               :header-cell-class-name="headerClass"
-               @row-save="rowSave"
                @row-del="rowDel"
                @search-change="searchChange"
                @search-reset="searchReset"
@@ -23,16 +22,78 @@
                    icon="el-icon-delete"
                    plain
                    v-if="permission.material_delete"
-                   @click="handleDelete">删 除
+                   @click="handleDelete">批量删除
         </el-button>
       </template>
+      <template slot="menuRight">
+        <el-button type="primary"
+                   size="small"
+                   plain
+                   @click="handleDetailAdd">新增
+        </el-button>
+        <el-button type="primary"
+                   size="small"
+                   plain
+                   @click="handleIn">入库
+        </el-button>
+        <el-button type="primary"
+                   size="small"
+                   plain
+                   @click="handleOut">出库
+        </el-button>
+        <el-button type="primary"
+                   size="small"
+                   plain
+                   @click="handleExport()">导出
+        </el-button>
+      </template>
+      <template #menu="{row,index,size}">
+        <el-button @click="handleDetailSearch(row,index)" type="text">查看</el-button>
+        <el-button @click="rowDel(row)" type="text">删除</el-button>
+      </template>
     </avue-crud>
+    <el-dialog title="入库信息"
+               append-to-body
+               :visible.sync="inBox"
+               width="480px"
+               @close="handleClose">
+      <avue-form :option="optionIn"
+                 v-model="inForm"
+                 ref="inForm">
+        <!--                 :upload-after="uploadAfter">-->
+      </avue-form>
+      <span slot="footer" class="dialog-footer">
+            <el-button @click="inBox = false">取 消</el-button>
+            <el-button type="primary"
+                       @click="submitIn">确 定</el-button>
+          </span>
+    </el-dialog>
+    <el-dialog title="出库信息"
+               append-to-body
+               :visible.sync="outBox"
+               width="480px"
+               @close="handleClose">
+      <avue-form :option="optionOut"
+                 v-model="outForm"
+                 ref="outForm">
+        <!--                 :upload-after="uploadAfter">-->
+      </avue-form>
+      <span slot="footer" class="dialog-footer">
+            <el-button @click="outBox = false">取 消</el-button>
+            <el-button type="primary"
+                       @click="submitOut">确 定</el-button>
+          </span>
+    </el-dialog>
   </basic-container>
 </template>
 
 <script>
-  import {getList, getDetail, add, update, remove} from "@/api/spares/material";
+  import {getList, getDetail, remove} from "@/api/spares/material";
+  import {in_add} from "@/api/spares/inbound";
+  import {out_add} from "@/api/spares/outbound";
   import {mapGetters} from "vuex";
+  import expUtil from "@/util/exportUtil";
+  import {getToken} from "@/util/auth";
 
   export default {
     data() {
@@ -40,6 +101,8 @@
         form: {},
         query: {},
         loading: true,
+        inBox: false,
+        outBox: false,
         page: {
           pageSize: 10,
           currentPage: 1,
@@ -53,31 +116,40 @@
           searchMenuSpan: 6,
           tip: false,
           border: true,
-          index: true,
+          index: false,
           viewBtn: true,
           selection: true,
           column: [
             {
-              label: "主键",
+              label: "物资编号",
-              prop: "id",
+              prop: "materialNo",
+              search: true,
               rules: [{
                 required: true,
-                message: "请输入主键",
+                message: "请输入物资编号",
                 trigger: "blur"
               }]
             },
             {
-              label: "物资编号",
+              label: "场站",
-              prop: "materialNo",
+              prop: "station",
+              type: "select",
+              search: true,
+              dicUrl: "/api/daf-system/dict/dictionary?code=station",
+              props: {
+                label: "dictValue",
+                value: "dictKey"
+              },
               rules: [{
                 required: true,
-                message: "请输入物资编号",
+                message: "请输入场站",
                 trigger: "blur"
               }]
             },
             {
               label: "物资名称",
               prop: "materialName",
+              search: true,
               rules: [{
                 required: true,
                 message: "请输入物资名称",
@@ -87,6 +159,7 @@
             {
               label: "物资分类码",
               prop: "materialClassCode",
+              hide: true,
               rules: [{
                 required: true,
                 message: "请输入物资分类码",
@@ -96,6 +169,7 @@
             {
               label: "规格型号",
               prop: "model",
+              search: true,
               rules: [{
                 required: true,
                 message: "请输入规格型号",
@@ -105,6 +179,7 @@
             {
               label: "制造商名称",
               prop: "manufacturerName",
+              hide: true,
               rules: [{
                 required: true,
                 message: "请输入制造商名称",
@@ -114,6 +189,7 @@
             {
               label: "供应商名称",
               prop: "sipplierName",
+              hide: true,
               rules: [{
                 required: true,
                 message: "请输入供应商名称",
@@ -123,6 +199,7 @@
             {
               label: "所属仓库",
               prop: "warehouse",
+              hide: true,
               rules: [{
                 required: true,
                 message: "请输入所属仓库",
@@ -132,6 +209,7 @@
             {
               label: "库存数量",
               prop: "inventoryCount",
+              search: true,
               rules: [{
                 required: true,
                 message: "请输入库存数量",
@@ -147,21 +225,157 @@
                 trigger: "blur"
               }]
             },
+
             {
-              label: "场站",
+              label: "审核状态",
-              prop: "station",
+              prop: "istatus",
+              hide: true,
+              dicUrl: "/api/daf-system/dict/dictionary?code=check_status",
+              props: {
+                label: "dictValue",
+                value: "dictKey"
+              },
               rules: [{
                 required: true,
-                message: "请输入场站",
+                message: "请输入审核状态",
                 trigger: "blur"
               }]
             },
+          ]
+        },
+        inForm: {},
+        optionIn: {
+          submitBtn: false,
+          emptyBtn: false,
+          menuAlign: "left",
+          column: [
             {
-              label: "审核状态",
+              label: "物资编号",
-              prop: "istatus",
+              prop: "materialNo",
+              type:"select",
+              span: 22,
               rules: [{
                 required: true,
-                message: "请输入审核状态",
+                message: "请输入物资编号",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "物资名称",
+              prop: "materialName",
+              span: 22,
+              disabled: true,
+            },
+            {
+              label: "规格型号",
+              prop: "model",
+              span: 22,
+              disabled: true,
+            },
+            {
+              label: "所属仓库",
+              prop: "warehouse",
+              span: 22,
+              disabled: true,
+
+            },
+            {
+              label: "入库数量",
+              prop: "inboundCount",
+              span: 22,
+              rules: [{
+                required: true,
+                message: "请输入入库数量",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "入库申领人",
+              prop: "inboundClaimants",
+              span: 22,
+              labelWidth:100,
+              rules: [{
+                required: true,
+                message: "请输入入库申领人",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "入库经办人",
+              prop: "inboundManager",
+              span: 22,
+              labelWidth: 100,
+              rules: [{
+                required: true,
+                message: "请输入入库经办人",
+                trigger: "blur"
+              }]
+            },
+          ]
+        },
+        outForm: {},
+        optionOut: {
+          submitBtn: false,
+          emptyBtn: false,
+          column: [
+            {
+              label: "物资编号",
+              prop: "materialNo",
+              span: 22,
+              rules: [{
+                required: true,
+                message: "请输入物资编号",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "物资名称",
+              prop: "materialName",
+              span: 22,
+              disabled: true,
+            },
+            {
+              label: "规格型号",
+              prop: "model",
+              span: 22,
+              disabled: true,
+            },
+            {
+              label: "所属仓库",
+              prop: "warehouse",
+              span: 22,
+              disabled: true,
+
+            },
+            {
+              label: "出库数量",
+              prop: "outboundCount",
+              span: 22,
+              rules: [{
+                required: true,
+                message: "请输入入库数量",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "出库申领人",
+              prop: "outboundClaimants",
+              span: 22,
+              labelWidth: 100,
+              rules: [{
+                required: true,
+                message: "请输入出库申领人",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "出库经办人",
+              prop: "outboundManager",
+              span: 22,
+              labelWidth: 100,
+              rules: [{
+                required: true,
+                message: "请输入出库经办人",
                 trigger: "blur"
               }]
             },
@@ -177,10 +391,10 @@
           //     return this.permission['material_col_' + v.prop]
           // })
         return {
-          addBtn: this.vaildData(this.permission.material_add, false),
+          addBtn: false,
-          viewBtn: this.vaildData(this.permission.material_view, false),
+          viewBtn: false,
-          delBtn: this.vaildData(this.permission.material_delete, false),
+          delBtn: false,
-          editBtn: this.vaildData(this.permission.material_edit, false)
+          editBtn: false
         };
       },
       ids() {
@@ -192,32 +406,6 @@
       }
     },
     methods: {
-      rowSave(row, done, loading) {
-        add(row).then(() => {
-          done();
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-        }, error => {
-          window.console.log(error);
-          loading();
-        });
-      },
-      rowUpdate(row, index, done, loading) {
-        update(row).then(() => {
-          done();
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-        }, error => {
-          window.console.log(error);
-          loading();
-        });
-      },
       rowDel(row) {
         this.$confirm("确定将选择数据删除?", {
           confirmButtonText: "确定",
@@ -257,6 +445,89 @@
             this.$refs.crud.toggleSelection();
           });
       },
+      handleDetailAdd() {
+        this.$router.push({
+          path: "/spares/materialDetail",
+          query: {
+            frameMode:"add"
+          },
+        });
+      },
+      handleIn(){
+        this.inBox = true;
+      },
+      submitIn(row, done, loading) {
+        this.$refs.inForm.validate((valid, done, msg) => {
+          if (valid) {
+            done()
+            in_add(this.inForm).then(() => {
+              this.$refs.inForm.inForm();
+              this.inBox = false;
+              this.onLoad(this.page);
+              this.$message({
+                type: "success",
+                message: "操作成功!"
+              });
+            }, error => {
+              window.console.log(error);
+              loading();
+            });
+          } else {
+            this.$message({
+              type: "warning",
+              message: "请输入必要信息!"
+            });
+          }
+        });
+      },
+      handleOut(){
+        this.outBox = true;
+      },
+      submitOut(row, done, loading) {
+        this.$refs.outForm.validate((valid, done, msg) => {
+          if (valid) {
+            done()
+            out_add(this.outForm).then(() => {
+              this.$refs.outForm.outForm();
+              this.outBox = false;
+              this.onLoad(this.page);
+              this.$message({
+                type: "success",
+                message: "操作成功!"
+              });
+            }, error => {
+              window.console.log(error);
+              loading();
+            });
+          } else {
+            this.$message({
+              type: "warning",
+              message: "请输入必要信息!"
+            });
+          }
+        });
+      },
+      handleExport() {
+        this.$confirm("是否导出数据?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          expUtil.excelExport(`/api/spares/export?daf-auth=${getToken()}`, this.search, ['station', 'iStatus']);
+        });
+      },
+      handleDetailSearch(row) {
+        this.$router.push({
+          path: "/spares/materialDetail",
+          query: {
+            frameMode:"view",
+            id: row.id,
+          },
+        });
+      },
+      headerClass() {
+        return 'header-class'
+      },
       beforeOpen(done, type) {
         if (["edit", "view"].includes(type)) {
           getDetail(this.form.id).then(res => {
@@ -303,4 +574,8 @@
 </script>
 
 <style>
+.header-class{
+  background-color: #3366cc !important;
+  color: #FFFFFF !important;
+}
 </style>