资产管理

src/views/administrative-management/assetAdd.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <a-drawer
+      title="新增"
+      placement="right"
+      :closable="false"
+      :visible="visible"
+      width="800"
+      :maskClosable="false"
+    >
+      <a-form-model layout="inline" ref="ruleForm" :model="form" :rules="rules">
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-model-item
+              :label-col="{span:8}"
+              :wrapper-col="{ span: 16}"
+              label="名称"
+              prop="name"
+              style="width:100%"
+            >
+              <a-input v-model="form.name" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item
+              :label-col="{span:8}"
+              :wrapper-col="{ span: 16}"
+              label="类别"
+              style="width:100%"
+            >
+              <a-select show-search placeholder="请选择" style="width: 100%" v-model="form.type">
+                <a-select-option value="电脑类">电脑类</a-select-option>
+                <a-select-option value="电器类">电器类</a-select-option>
+                <a-select-option value="电子档案">电子档案</a-select-option>
+                <a-select-option value="电子设备">电子设备</a-select-option>
+                <a-select-option value="房屋建筑">房屋建筑</a-select-option>
+                <a-select-option value="机器设备">机器设备</a-select-option>
+                <a-select-option value="家具用具">家具用具</a-select-option>
+                <a-select-option value="其他物品">其他物品</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </a-form-model>
+      <!-- 底部按钮 -->
+      <div
+        :style="{
+          position: 'absolute',
+          right: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '10px 16px',
+          background: '#fff',
+          textAlign: 'right',
+          zIndex: 1,
+        }"
+      >
+        <a-button :style="{ marginRight: '8px' }" @click="close">关闭</a-button>
+        <a-button type="primary" @click="save">保存</a-button>
+      </div>
+    </a-drawer>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      //表单属性
+      form: {
+        name: '',
+        type: ''
+      },
+      //表单校验
+      rules: {
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    //打开抽屉
+    showDrawer() {
+      this.visible = true
+    },
+    //保存按钮
+    save() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          //校验成功
+          console.log(this.form)
+        } else {
+          return false
+        }
+      })
+    },
+    //关闭按钮
+    close() {
+      //   this.$refs.ruleForm.resetFields()
+      this.visible = false
+    }
+  }
+}
+</script>

src/views/administrative-management/assetManagement.vue

@@ -72,12 +72,17 @@
         </a-card>
       </a-col>
     </a-row>
+    <assetAdd ref="assetAdd"></assetAdd>
   </div>
 </template>
 
 <script>
+import assetAdd from './assetAdd'
 export default {
   name: 'assetManagement',
+  components:{
+    assetAdd
+  },
   data() {
     return {
       columns: [
@@ -164,7 +169,9 @@ export default {
       // })
     },
     //新增
-    add() {},
+    add() {
+      this.$refs.assetAdd.showDrawer();
+    },
     //编辑
     edit() {},
     //详情