|
|
@@ -0,0 +1,182 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!-- 查询区域 -->
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24" style="padding:5px">
|
|
|
+ <a-card>
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
+ <a-form layout="inline" @keyup.enter.native="searchQuery">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item label="名称">
|
|
|
+ <a-input placeholder="请输入名称查询" v-model="queryParam.name"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="18">
|
|
|
+ <a-button type="primary" @click="searchQuery">查询</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24" style="padding:5px">
|
|
|
+ <a-card>
|
|
|
+ <!-- 操作按钮区域 -->
|
|
|
+ <div class="table-operator" style="border-top: 5px">
|
|
|
+ <a-button @click="add" type="primary">新增</a-button>
|
|
|
+ </div>
|
|
|
+ <!-- 表格区域 -->
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :row-key="record => record.id"
|
|
|
+ :data-source="dataPageList"
|
|
|
+ :pagination="pagination"
|
|
|
+ :loading="loading"
|
|
|
+ @change="handleTableChange"
|
|
|
+ >
|
|
|
+ <!-- 领用人 -->
|
|
|
+ <span slot="receiverSlot" slot-scope="text, record">
|
|
|
+ <a-tag color="blue">{{record.receiver}}</a-tag>
|
|
|
+ </span>
|
|
|
+ <!-- 状态 -->
|
|
|
+ <span slot="stateSlot" slot-scope="text, record">
|
|
|
+ <a-badge v-if="record.state=='0'" status="success" text="正常" />
|
|
|
+ </span>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <span slot="actionSlot" slot-scope="text, record">
|
|
|
+ <a @click="edit(record)">编辑</a>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <!-- 更多 -->
|
|
|
+ <a-dropdown>
|
|
|
+ <a class="ant-dropdown-link">
|
|
|
+ 更多
|
|
|
+ <a-icon type="down" />
|
|
|
+ </a>
|
|
|
+ <a-menu slot="overlay">
|
|
|
+ <a-menu-item>
|
|
|
+ <a href="javascript:;" @click="detail(record)">详情</a>
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item>
|
|
|
+ <a-popconfirm title="确定删除吗?" @confirm="() => delete(record.id)">
|
|
|
+ <a>删除</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ </a-menu-item>
|
|
|
+ </a-menu>
|
|
|
+ </a-dropdown>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'assetManagement',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ // sorter: true,
|
|
|
+ width: '20%'
|
|
|
+ // scopedSlots: { customRender: 'name' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '类别',
|
|
|
+ dataIndex: 'type',
|
|
|
+ // filters: [
|
|
|
+ // { text: 'Male', value: 'male' },
|
|
|
+ // { text: 'Female', value: 'female' }
|
|
|
+ // ],
|
|
|
+ width: '20%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '编号',
|
|
|
+ dataIndex: 'code'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '单价',
|
|
|
+ dataIndex: 'unitPrice'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '领用人',
|
|
|
+ dataIndex: 'receiver',
|
|
|
+ scopedSlots: { customRender: 'receiverSlot' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ dataIndex: 'state',
|
|
|
+ scopedSlots: { customRender: 'stateSlot' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ scopedSlots: { customRender: 'actionSlot' }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataPageList: [
|
|
|
+ {
|
|
|
+ id: '123',
|
|
|
+ name: '笔记本电脑',
|
|
|
+ type: '电脑类',
|
|
|
+ code: 'DN-006',
|
|
|
+ unitPrice: '4000.00',
|
|
|
+ receiver: '袁少华',
|
|
|
+ state: '0'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '234',
|
|
|
+ name: '办公桌',
|
|
|
+ type: '家具用具 ',
|
|
|
+ code: 'Z-003',
|
|
|
+ unitPrice: '300.00',
|
|
|
+ receiver: '俞阳',
|
|
|
+ state: '0'
|
|
|
+ }
|
|
|
+ ], //表格数据集合
|
|
|
+ loading: false, //表格加载
|
|
|
+ pagination: {}, //分页
|
|
|
+ queryParam: {} //查询条件参数对象
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ computed: {},
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ handleTableChange(pagination, filters, sorter) {
|
|
|
+ // console.log(pagination)
|
|
|
+ // const pager = { ...this.pagination }
|
|
|
+ // pager.current = pagination.current
|
|
|
+ // this.pagination = pager
|
|
|
+ // this.fetch({
|
|
|
+ // results: pagination.pageSize,
|
|
|
+ // page: pagination.current,
|
|
|
+ // sortField: sorter.field,
|
|
|
+ // sortOrder: sorter.order,
|
|
|
+ // ...filters
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ //新增
|
|
|
+ add() {},
|
|
|
+ //编辑
|
|
|
+ edit() {},
|
|
|
+ //详情
|
|
|
+ detail() {},
|
|
|
+ //删除
|
|
|
+ delete() {},
|
|
|
+ //查询
|
|
|
+ searchQuery() {
|
|
|
+ this.loading = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+</style>
|
