物资登记表页面

public/index.html

@@ -240,6 +240,11 @@
     ::-webkit-scrollbar-corner {
       background: #f6f6f6;
     }
+     .ant-modal-body {
+        height: 500px !important;
+        overflow: scroll;
+        background-color: #000;
+}
     /* 滚动条优化 end */
   </style>
   <!-- 全局配置 -->

src/views/system/MaterialRegistration.vue

@@ -0,0 +1,232 @@
+<template>
+   <a-card :bordered="false" >
+    <!-- 查询 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+
+          <a-col :md="6" :sm="12">
+            <a-form-item label="设备名称">
+              <a-input placeholder="输入设备名称查询" v-model="queryParam.name"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="12">
+            <a-form-item label="购买日期">
+              <a-date-picker
+               style="width: 100%"
+               placeholder="请选择购买日期"
+               v-model="queryParam.buyTime"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="12">
+            <a-form-item label="状态">
+              <a-input placeholder="输入设备状态查询" v-model="queryParam.type"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+              <a @click="handleToggleSearch" style="margin-left: 8px">
+                {{ toggleSearchStatus ? '收起' : '展开' }}
+                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+              </a>
+            </span>
+          </a-col>
+
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- 操作按钮区域 -->
+    <div class="table-operator" style="border-top: 5px">
+      <a-button @click="handleAdd" type="primary" icon="plus">添加</a-button>
+      <a-button @click="handleDelete" type="primary" icon="plus">删除</a-button>
+    </div>
+
+     <!-- table区域-begin -->
+    <div>
+      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
+        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      </div>
+
+      <a-table
+        ref="table"
+        bordered
+        size="middle"
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        @change="handleTableChange">
+
+        <span slot="operation" slot-scope="text, record">
+          <a @click="handleEdit(record)">编辑</a>
+          <a-divider type="vertical" />
+          <a @click="handleDetail(record)">详情</a>
+        </span>
+
+
+      </a-table>
+    </div>
+    <!-- 新增框 -->
+    <add-material-registration ref='AddMaterialRegistration'></add-material-registration>
+    <detail-material-registration ref="DetailMaterialRegistration"></detail-material-registration>
+   </a-card>
+   
+</template>
+
+<script>
+  
+  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+  import AddMaterialRegistration from './modules/AddMaterialRegistration'
+  import DetailMaterialRegistration from './modules/DetailMaterialRegistration'
+
+  export default {
+    name: "MaterialRegistration",
+    mixins: [JeecgListMixin],
+    components: {
+    AddMaterialRegistration,
+    DetailMaterialRegistration
+    },
+    data() {
+      return {
+          queryParam:{   //查询条件
+
+          },
+        //   表头
+        columns:[
+            {
+            title: '编号',
+            align: "center",
+            dataIndex: 'code',
+            width: 120
+          },
+          {
+            title: '设备名称',
+            align: "center",
+            dataIndex: 'name',
+            width: 120
+          },
+          {
+            title: '型号',
+            align: "center",
+            dataIndex: 'model',
+            width: 120
+          },
+          {
+            title: '购买日期',
+            align: "center",
+            dataIndex: 'buyTime',
+            width: 120
+          },
+          {
+            title: '购买数量',
+            align: "center",
+            dataIndex: 'buyNum',
+            width: 120
+          },
+          {
+            title: '单位',
+            align: "center",
+            dataIndex: 'unit',
+            width: 120
+          },
+          {
+            title: '购买金额',
+            align: "center",
+            dataIndex: 'amount',
+            width: 120
+          },
+          {
+            title: '使用者',
+            align: "center",
+            dataIndex: 'useId',
+            width: 120
+          },
+          {
+            title: '状态',
+            align: "center",
+            dataIndex: 'type',
+            width: 120
+          },
+          {
+            title: '供货方',
+            align: "center",
+            dataIndex: 'supply',
+            width: 120
+          },
+          {
+            title: '备注',
+            align: "center",
+            dataIndex: 'remarks',
+            width: 120
+          },
+          {
+            title: '来源',
+            align: "center",
+            dataIndex: 'source',
+            width: 120
+          },
+          {
+            title: '操作',
+            align: "center",
+            dataIndex: 'operation',
+            scopedSlots: { customRender: 'operation' },
+            width: 120
+          },
+        ]
+      }
+    },
+    computed: {
+    
+    },
+    created(){
+        this.getData()
+    },
+    methods: {
+        // 查询
+        searchQuery(){
+
+        },
+        //重置
+        searchReset(){
+          this.queryParam ={}
+        },
+        // 获取数据
+        getData(){
+            
+        },
+        // 删除
+        handleDelete(){
+
+        },
+        // 添加
+        handleAdd(){
+          this.$refs.AddMaterialRegistration.visible = true
+        },
+        //编辑
+        handleEdit(record){
+           this.$refs.AddMaterialRegistration.visible = true
+            this.$refs.AddMaterialRegistration.defult = 'edit'
+            this.$refs.AddMaterialRegistration.formState = record
+        },
+        //详情
+        handleDetail(record){
+           this.$refs.DetailMaterialRegistration.visible = true
+           this.$refs.DetailMaterialRegistration.formState = record
+
+        },
+    }
+     
+
+  }
+</script>
+<style scoped>
+  @import '~@assets/less/common.less'
+</style>

src/views/system/modules/AddMaterialRegistration.vue

@@ -0,0 +1,117 @@
+<template>
+  <a-modal
+    :title="(defult == 'add')?'新增':'编辑'"
+    width="55%"
+    :closable="true"
+    @cancel="close"
+    @ok="handleSubmit"
+    :visible="visible"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :model="formState"  >
+        <a-form-item label="编号" >
+          <a-input
+            placeholder="请输入编号"
+           v-model="formState.code"
+          />
+        </a-form-item>
+
+        <a-form-item label="设备名称"  >
+          <a-input placeholder="请输入" v-model="formState.name"/>
+        </a-form-item>
+        <a-form-item label="型号"  >
+            <a-input placeholder="请输入" v-model="formState.model"/>
+        </a-form-item>
+        <a-form-item label="购买日期"  >
+            <a-date-picker
+            style="width: 100%"
+            placeholder="请选择购买日期"
+            v-model="formState.buyTime"
+          />
+        </a-form-item>
+        <a-form-item label="购买数量"  >
+          <a-input placeholder="请输入购买数量" v-model="formState.buyNum"/>
+        </a-form-item>
+        <a-form-item label="单位"  >
+          <a-input placeholder="请输入单位" v-model="formState.unit"/>
+        </a-form-item>
+        <a-form-item label="购买金额"  >
+          <a-input placeholder="请输入购买金额" v-model="formState.amount"/>
+        </a-form-item>
+        <a-form-item label="使用者"  >
+          <a-input placeholder="请输入" v-model="formState.useId"/>
+        </a-form-item>
+        <a-form-item label="状态"  >
+          <a-input placeholder="请输入" v-model="formState.type"/>
+        </a-form-item>
+        <a-form-item label="供货方"  >
+          <a-input placeholder="请输入供货方" v-model="formState.supply"/>
+        </a-form-item>
+        <a-form-item label="备注"  >
+          <a-input placeholder="请输入备注" v-model="formState.remarks"/>
+        </a-form-item>
+        <a-form-item label="来源"  >
+          <a-input placeholder="请输入来源" v-model="formState.source"/>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+
+  </a-modal>
+</template>
+
+<script>
+
+
+export default {
+    name: 'AddMaterialRegistration',
+    components: {
+        
+    },
+    data () {
+        return {
+            visible:false,
+            defult:'add',
+            formState:{
+
+            },
+            confirmLoading: false,
+        }
+    },
+    created () {
+        
+    },
+    computed: {
+       
+    },
+    methods: {
+     close(){
+       this.visible = false
+       this.formState={}
+       this.defult='add'
+     },
+    handleSubmit(){
+      
+    }
+    }
+}
+</script>
+
+<style scoped lang="less">
+/deep/.ant-form{
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+/deep/ .ant-form-item{
+    display: flex;
+    width: 45%;
+    justify-content: center;
+}
+/deep/ .ant-form-item-label{
+  width: 20%;
+}
+
+
+</style>

src/views/system/modules/DetailMaterialRegistration.vue

@@ -0,0 +1,228 @@
+<template>
+<a-modal
+    title="详情"
+    width="55%"
+    :closable="true"
+    @cancel="close"
+    :visible="visible"
+  >
+  <template slot="footer">
+      <a-button @click="close">关闭</a-button>
+    </template>
+   <a-card :bordered="false">
+     <a-spin :spinning="confirmLoading">
+      <a-form :model="formState"  >
+        <a-form-item label="编号" >
+          {{formState.code}}
+        </a-form-item>
+
+        <a-form-item label="设备名称"  >
+            {{formState.name}}
+        </a-form-item>
+        <a-form-item label="型号"  >
+            {{formState.model}}
+        </a-form-item>
+        <a-form-item label="购买日期"  >
+            {{formState.buyTime}}
+        </a-form-item>
+        <a-form-item label="购买数量"  >
+            {{formState.buyNum}}
+        </a-form-item>
+        <a-form-item label="单位"  >
+            {{formState.unit}}
+        </a-form-item>
+        <a-form-item label="购买金额"  >
+            {{formState.amount}}
+        </a-form-item>
+        <a-form-item label="使用者"  >
+            {{formState.useId}}
+        </a-form-item>
+        <a-form-item label="状态"  >
+            {{formState.type}}
+        </a-form-item>
+        <a-form-item label="供货方"  >
+            {{formState.supply}}
+        </a-form-item>
+        <a-form-item label="备注"  >
+            {{formState.remarks}}
+        </a-form-item>
+        <a-form-item label="来源"  >
+            {{formState.source}}
+        </a-form-item>
+      </a-form>
+    </a-spin>
+
+    </a-card>
+    <a-divider style="height: 1px; background-color: balck" />
+
+      <a-card :bordered="false" >
+          <div class="purchase-order-table"  >
+              <h6 class="table-title">维修服务记录</h6>
+              <a-table
+                :columns="Columns"
+                :data-source="List"
+                bordered
+                :pagination="false"
+              >
+              </a-table>
+          </div>
+           <div class="purchase-order-table" >
+              <h6 class="table-title">领用记录</h6>
+              <a-table
+                :columns="Columns1"
+                :data-source="List1"
+                bordered
+                :pagination="false"
+              >
+              </a-table>
+          </div>
+      </a-card>
+</a-modal>
+  
+</template>
+
+<script>
+
+
+
+export default {
+  name: 'DetailMaterialRegistration', 
+  mixins: [],
+  computed: {},
+  components: {  }, 
+  data() {
+    return{
+        visible:false,
+         formState:{
+
+            },
+        confirmLoading: false,
+        Columns:[
+            
+            {
+            title: '主要信息编号',
+            align: "center",
+            dataIndex: 'headCode',
+            width: 200
+          },
+          {
+            title: '日期',
+            align: "center",
+            dataIndex: 'infoDate',
+            width: 120
+          },
+          {
+            title: '维修项目',
+            align: "center",
+            dataIndex: 'items',
+            width: 200
+          },
+          {
+            title: '费用',
+            align: "center",
+            dataIndex: 'cost',
+            width: 120
+          },
+          {
+            title: '备注',
+            align: "center",
+            dataIndex: 'remarks',
+            width: 120
+          },
+        ],
+         Columns1:[
+            
+            {
+            title: '主要信息编号',
+            align: "center",
+            dataIndex: 'headCode',
+            width: 200
+          },
+          {
+            title: '领用日期',
+            align: "center",
+            dataIndex: 'infoDate',
+            width: 120
+          },
+          {
+            title: '领用人',
+            align: "center",
+            dataIndex: 'items',
+            width: 200
+          },
+          {
+            title: '归还日期',
+            align: "center",
+            dataIndex: 'cost',
+            width: 120
+          },
+          {
+            title: '备注',
+            align: "center",
+            dataIndex: 'remarks',
+            width: 120
+          },
+        ],
+        List:[],
+        List1:[],
+    }
+    
+  },
+   // 接收父组件查询方法
+  props: {
+    
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    close(){
+        this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/.ant-form{
+    display: flex !important;
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+/deep/ .ant-form-item{
+    display: flex;
+    width: 24%;
+    justify-content: center;
+}
+/deep/ .ant-form-item-label{
+  width: 35%;
+}
+/deep/.ant-modal{
+    background-color: red !important;
+}
+.table-title {
+  margin: 0;
+  border: 1px solid #e8e8e8;
+  background-color: #f2f2f2;
+  border-top-right-radius: 16px;
+  border-bottom: none;
+  font-size: 16px;
+  width: 160px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+}
+.purchase-order-table{
+  margin-bottom: 10px;
+}
+
+/deep/ .ant-card-body{
+      padding: 0px 32px !important;
+}
+/deep/ .ant-divider-horizontal{
+  margin: 13px 0;
+}
+
+
+</style>