yudao-dev/src/views/base/material/index.vue
2024-04-15 17:22:10 +08:00

181 lines
3.6 KiB
Vue

<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<!-- 列表 -->
<base-table
v-loading="dataListLoading"
:table-props="tableProps"
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:table-data="tableData">
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="90"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" />
<!-- 对话框(添加 / 修改) -->
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
width="40%">
<add-or-update
ref="addOrUpdate"
@refreshDataList="successSubmit"></add-or-update>
</base-dialog>
</div>
</template>
<script>
import AddOrUpdate from './add-or-updata';
import basicPage from '@/mixins/basic-page';
import { parseTime } from '@/filter/code-filter';
import { publicFormatter } from "@/utils/dict";
import {
deleteMaterial,
getMaterialPage,
} from '@/api/base/material';
const tableProps = [
{
prop: 'createTime',
label: '添加时间',
filter: parseTime,
minWidth: 150
},
{
prop: 'name',
label: '原料名称',
},
{
prop: 'code',
label: '原料编码',
width: 180,
},
{
prop: 'unit',
label: '单位',
filter: publicFormatter('unit_dict'),
},
];
export default {
mixins: [basicPage],
data() {
return {
urlOptions: {
getDataListURL: getMaterialPage,
deleteURL: deleteMaterial,
},
tableProps,
tableBtn: [
this.$auth.hasPermi(`base:material:update`)
? {
type: 'edit',
btnName: '编辑',
}
: undefined,
this.$auth.hasPermi(`base:material:delete`)
? {
type: 'delete',
btnName: '删除',
}
: undefined,
].filter((v) => v),
tableData: [],
formConfig: [
{
type: 'input',
label: '原料名称',
placeholder: '原料名称',
param: 'name'
},
{
type: 'input',
label: '原料编码',
placeholder: '原料编码',
param: 'code'
},
{
type: this.$auth.hasPermi('base:material:query')
? 'button'
: '',
btnName: '查询',
name: 'search',
color: 'primary',
},
{
type:
this.$auth.hasPermi('base:material:create') &&
this.$auth.hasPermi('base:material:query')
? 'separate'
: '',
},
{
type: this.$auth.hasPermi('base:material:create')
? 'button'
: '',
btnName: '新增',
name: 'add',
color: 'success',
plain: true,
},
],
};
},
components: {
AddOrUpdate,
},
created() {
},
methods: {
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.name = val.name;
this.listQuery.code = val.code;
this.getDataList();
break;
case 'reset':
this.$refs.searchBarForm.resetForm();
this.listQuery = {
pageSize: 20,
pageNo: 1,
total: 1,
};
this.getDataList();
break;
case 'add':
this.addOrEditTitle = '新增';
this.addOrUpdateVisible = true;
this.addOrUpdateHandle();
break;
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
},
},
};
</script>