201 lines
7.4 KiB
Vue
201 lines
7.4 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="main-from common-box">
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="70px">
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="可用状态">
|
|
<el-select v-model="formInline.region" placeholder="请选择" clearable>
|
|
<el-option label="启用" value="shanghai" />
|
|
<el-option label="禁用" value="shanghai" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="名称">
|
|
<el-input v-model="formInline.user" placeholder="请输入名称" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="编码">
|
|
<el-input v-model="formInline.user" placeholder="请输入编码" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
|
|
<el-col :span="8">
|
|
<el-form-item label="规格型号">
|
|
<el-input v-model="formInline.user" placeholder="请输入" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="助记码">
|
|
<el-input v-model="formInline.user" placeholder="请输入" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="品牌">
|
|
<el-select v-model="formInline.region" placeholder="请选择" clearable>
|
|
<el-option label="海天" value="shanghai" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
|
<el-button type="primary" @click="onSubmit">重置</el-button>
|
|
<el-button @click="onSubmit">保存</el-button>
|
|
<el-button type="primary" @click="onSubmit">新增</el-button>
|
|
<el-button @click="onSubmit" type="warning">删除</el-button>
|
|
<el-button @click="onSubmit">启用</el-button>
|
|
<el-button @click="onSubmit">禁用</el-button>
|
|
<el-dropdown style="margin-left: 10px;">
|
|
<el-button type="primary">
|
|
更多操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item>导入</el-dropdown-item>
|
|
<el-dropdown-item>导出</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div class="main-table common-box">
|
|
<div class="tab-hed">
|
|
<el-select v-model="formInline.region" placeholder="分类" clearable style="width: 200px;">
|
|
<el-option label="所有" value="shanghai" />
|
|
<el-option label="成品" value="shanghai" />
|
|
<el-option label="成品非追溯" value="shanghai" />
|
|
</el-select>
|
|
<div>
|
|
<el-button type="success" link
|
|
style="border-right: 1px #515a6e solid; border-radius: 0px; margin-right: 3px; padding: 0 3px;">新增</el-button>
|
|
<el-dropdown>
|
|
<span class="el-dropdown-link">
|
|
更多
|
|
<el-icon class="el-icon--right">
|
|
<arrow-down />
|
|
</el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item>查看</el-dropdown-item>
|
|
<el-dropdown-item>修改</el-dropdown-item>
|
|
<el-dropdown-item>删除</el-dropdown-item>
|
|
<el-dropdown-item>刷新</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
<div class="tab">
|
|
<vxe-table show-overflow height="100%" :data="tableData" :border=true :tree-config="{ transform: true }"
|
|
:scroll-y="{ gt: 20 }">
|
|
<vxe-column field="a" sortable title="编码" width=""></vxe-column>
|
|
<vxe-column field="b" sortable title="名称" width=""></vxe-column>
|
|
<vxe-column field="c" sortable title="可用状态" width=""></vxe-column>
|
|
|
|
<vxe-column field="d" sortable title="仓库条码" width=""></vxe-column>
|
|
<vxe-column field="e" sortable title="创建时间" width=""></vxe-column>
|
|
<vxe-column field="f" sortable title="仓库扩展字符串扩展字段1" width=""></vxe-column>
|
|
<vxe-column title="操作" width="200" fixed="right" show-overflow>
|
|
<template #default="{ row }">
|
|
<vxe-button type="text">查看</vxe-button>
|
|
<!-- <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> -->
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
|
|
</div>
|
|
<div>
|
|
<vxe-pager v-model:current-page="pageVO1.currentPage" v-model:page-size="pageVO1.pageSize"
|
|
:total="pageVO1.total" />
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive } from 'vue'
|
|
|
|
const formInline = reactive({
|
|
user: '',
|
|
region: '',
|
|
date: '',
|
|
})
|
|
|
|
const onSubmit = () => {
|
|
console.log('submit!')
|
|
}
|
|
|
|
|
|
|
|
import { ref } from 'vue'
|
|
|
|
const tableData = ref([
|
|
{
|
|
id: 1,
|
|
a: 'default',
|
|
b: '默认仓库',
|
|
c: ' 启用',
|
|
d: '00-00-00-00-00',
|
|
e: ' 2021-05-27 03:26:52',
|
|
f: "",
|
|
},
|
|
|
|
|
|
])
|
|
|
|
const pageVO1 = reactive({
|
|
currentPage: 1,
|
|
pageSize: 30,
|
|
total: 8
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.main-from {
|
|
// height: 300px;
|
|
width: 100%;
|
|
padding: 20px 10px;
|
|
|
|
.el-row {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.main-table {
|
|
margin-top: 20px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
flex-grow: 1;
|
|
height: 0;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.tab {
|
|
flex: 1;
|
|
overflow: scroll;
|
|
}
|
|
.tab-hed{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 5px;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |