fix: 重写耗材模块
This commit is contained in:
@@ -1,157 +0,0 @@
|
||||
<template>
|
||||
<div class="Table">
|
||||
<!-- 按钮 -->
|
||||
<AddButton @add="add"></AddButton>
|
||||
<!-- 表格 -->
|
||||
<Table :list="datas.tableData" @handleDelete="handleDelete" @handleEdit="handleEdit"
|
||||
@handleStatusChange="handleStatusChange"></Table>
|
||||
<!-- 分页 -->
|
||||
<Paging :pagingConfig="datas.pagingConfig" @sizeChange="sizeChange" @currentChange="currentChange"></Paging>
|
||||
<!-- 其他模板 -->
|
||||
<!-- 新增/编辑 -->
|
||||
<myDialog ref="myDialogRef" :title="datas.title" @confirm="confirm" width="30%">
|
||||
<el-form ref="ruleFormRef" :rules="datas.rules" :model="datas.DialogForm" label-width="120px">
|
||||
<el-form-item label="耗材类型名称" prop="name">
|
||||
<el-input v-model="datas.DialogForm.name" placeholder="请输入供应商名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否禁用">
|
||||
<el-switch v-model="datas.DialogForm.status" :active-value="1" :inactive-value="0" active-color="#13ce66"
|
||||
inactive-color="#ff4949" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</myDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import AddButton from './component/AddButton.vue'
|
||||
import Table from './component/Table.vue'
|
||||
import Paging from './component/Paging.vue'
|
||||
import myDialog from '@/components/mycomponents/myDialog.vue'
|
||||
import eventBus from '@/utils/eventBus'
|
||||
import API from './api'
|
||||
|
||||
const datas = reactive({
|
||||
tableData: [], // 表格数据
|
||||
title: '新增数据',
|
||||
pagingConfig: {
|
||||
total: 0, // 总数
|
||||
pageSize: 10, // 每页数据数量
|
||||
pageNumber: 1, // 当前页码
|
||||
},
|
||||
DialogForm: { // 弹窗表单数据
|
||||
status: 1
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入供应商名称', trigger: 'blur' },
|
||||
], switch: [
|
||||
{ required: true, message: ' ', trigger: 'blur' },
|
||||
],
|
||||
|
||||
}
|
||||
})
|
||||
const myDialogRef = ref(null)
|
||||
const ruleFormRef = ref(null)
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
eventBus.on('search', (res) => {
|
||||
getList(res)
|
||||
})
|
||||
async function getList(data = {}) {
|
||||
const res = await API.getPage({ page: datas.pagingConfig.pageNumber, size: datas.pagingConfig.pageSize, ...data })
|
||||
datas.tableData = res.records
|
||||
datas.pagingConfig.total = res.totalRow
|
||||
datas.pagingConfig.pageSize = res.pageSize
|
||||
datas.pagingConfig.pageNumber = res.pageNumber
|
||||
}
|
||||
function add() {
|
||||
rest()
|
||||
datas.title = '新增数据'
|
||||
myDialogRef.value.open()
|
||||
}
|
||||
async function handleEdit(row) {
|
||||
datas.title = '编辑数据'
|
||||
const res = await API.getinfo(row.id)
|
||||
datas.DialogForm = res
|
||||
myDialogRef.value.open()
|
||||
}
|
||||
// 修改状态
|
||||
async function handleStatusChange(row) {
|
||||
let res = null
|
||||
if (row.status == 1) {
|
||||
res = await API.onOff(row.id)
|
||||
} else {
|
||||
res = await API.onOff2(row.id)
|
||||
}
|
||||
if (res.code == 200) {
|
||||
getList()
|
||||
ElMessage({
|
||||
message: '成功',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
}
|
||||
async function confirm() {
|
||||
ruleFormRef.value.validate(async valid => {
|
||||
if (valid) {
|
||||
let res = null
|
||||
if (datas.title == '新增数据') {
|
||||
res = await API.add(datas.DialogForm)
|
||||
} else {
|
||||
res = await API.update(datas.DialogForm)
|
||||
}
|
||||
if (res.code == 200) {
|
||||
ElMessage({
|
||||
message: '成功',
|
||||
type: 'success',
|
||||
})
|
||||
rest()
|
||||
getList()
|
||||
myDialogRef.value.close()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// 重置
|
||||
function rest() {
|
||||
datas.DialogForm = { sort: "1" }
|
||||
}
|
||||
async function handleDelete(id) {
|
||||
ElMessageBox.confirm("是否删除数据项?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(
|
||||
async () => {
|
||||
let res = await API.deleteByIds(id)
|
||||
if (res.code == 200) {
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
})
|
||||
getList()
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
// 分页
|
||||
function sizeChange(val) {
|
||||
datas.pagingConfig.pageSize = val
|
||||
getList()
|
||||
}
|
||||
function currentChange(val) {
|
||||
datas.pagingConfig.pageNumber = val
|
||||
getList()
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.Table {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e4e7ed;
|
||||
margin-top: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,73 +0,0 @@
|
||||
import request from "@/utils/request";
|
||||
const baseURL = "/product/admin/product/cons-group";
|
||||
// 耗材-配置
|
||||
const AuthAPI = {
|
||||
// 列表
|
||||
getList(params: any) {
|
||||
return request<any, Responseres>({
|
||||
url: `${baseURL}/list`,
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
},
|
||||
/** 分页*/
|
||||
getPage(params: any) {
|
||||
return request<any, Responseres>({
|
||||
url: `${baseURL}/page`,
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
},
|
||||
// 新增
|
||||
add(data: any) {
|
||||
return request<any, Responseres>({
|
||||
url: `${baseURL}`,
|
||||
method: "post",
|
||||
data: { ...data },
|
||||
});
|
||||
},
|
||||
// 详情
|
||||
getinfo(id: number) {
|
||||
return request<any, Responseres>({
|
||||
url: `${baseURL}/${id}`,
|
||||
method: "get",
|
||||
});
|
||||
},
|
||||
// 编辑
|
||||
update(data: Object) {
|
||||
return request<any, Responseres>({
|
||||
url: `${baseURL}`,
|
||||
method: "put",
|
||||
data,
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
deleteByIds(id: number | String) {
|
||||
return request<any, Responseres>({
|
||||
url: `${baseURL}/${id}`,
|
||||
method: "delete",
|
||||
});
|
||||
},
|
||||
// 修改状态-启用
|
||||
onOff(id: number | String) {
|
||||
return request<any, Responseres>({
|
||||
url: `${baseURL}/enable/${id}`,
|
||||
method: "post",
|
||||
});
|
||||
},
|
||||
// 修改状态-禁用
|
||||
onOff2(id: number | String) {
|
||||
return request<any, Responseres>({
|
||||
url: `${baseURL}/disable/${id}`,
|
||||
method: "post",
|
||||
});
|
||||
}
|
||||
};
|
||||
export interface Responseres {
|
||||
code?: number | null;
|
||||
data?: any;
|
||||
msg?: null | string;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
export default AuthAPI;
|
||||
@@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<el-button type="primary" icon="Plus" @click="addEvent">新增</el-button>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
const emit = defineEmits(['add']);
|
||||
function addEvent() {
|
||||
emit('add');
|
||||
}
|
||||
</script>
|
||||
@@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<div style="margin-top: 10px;">
|
||||
<el-pagination background :page-size="props.pagingConfig.pageSize" :page-sizes="[10, 20, 30, 40]"
|
||||
layout="prev,pager,next,jumper,total,sizes" v-model:current-page="props.pagingConfig.pageNumber"
|
||||
:total="props.pagingConfig.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
pagingConfig: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['sizeChange', 'currentChange'])
|
||||
// 当前条改变
|
||||
function handleSizeChange(val) {
|
||||
emit('sizeChange', val)
|
||||
}
|
||||
// 当前页改变
|
||||
function handleCurrentChange(val) {
|
||||
emit('currentChange', val)
|
||||
}
|
||||
</script>
|
||||
@@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<div style="margin-top: 10px;">
|
||||
<el-table :data="props.list" border style="width: 100%">
|
||||
<el-table-column prop="id" align="center" label="ID" />
|
||||
<el-table-column prop="name" align="center" label="耗材类型名称" />
|
||||
<el-table-column prop="status" align="center" label="状态">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" active-color="#13ce66"
|
||||
inactive-color="#ff4949" @change="handleStatusChange(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="primary" link icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<!-- <el-button size="small" type="danger" link icon="Delete" style="color: #f89797;"
|
||||
@click="handleDelete(scope.$index, scope.row)"> 删除 </el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const emit = defineEmits(['handleDelete', 'handleEdit', 'handleStatusChange'])
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
function handleEdit(row) {
|
||||
emit('handleEdit', row)
|
||||
}
|
||||
function handleDelete(index, row) {
|
||||
emit('handleDelete', row.id)
|
||||
}
|
||||
|
||||
function handleStatusChange(row) {
|
||||
emit('handleStatusChange', row)
|
||||
}
|
||||
</script>
|
||||
53
src/views/inventory/classification/config/add.ts
Normal file
53
src/views/inventory/classification/config/add.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import Api from "@/api/product/cons-group";
|
||||
|
||||
|
||||
import { returnOptions, switchAttr } from "./config";
|
||||
import type { IModalConfig } from "@/components/CURD/types";
|
||||
|
||||
const modalConfig: IModalConfig = {
|
||||
pageName: "sys:user",
|
||||
dialog: {
|
||||
title: "添加耗材分类",
|
||||
width: 800,
|
||||
draggable: true,
|
||||
},
|
||||
form: {
|
||||
labelWidth: 140,
|
||||
},
|
||||
formAction: function (data) {
|
||||
return Api.add({ ...data });
|
||||
},
|
||||
beforeSubmit(data) {
|
||||
console.log("提交之前处理", data);
|
||||
},
|
||||
formItems: [
|
||||
|
||||
{
|
||||
label: "耗材类型名称",
|
||||
prop: "name",
|
||||
rules: [{ required: true, message: "请输入耗材类型名称", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入耗材类型名称",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "switch",
|
||||
label: "是否启用",
|
||||
prop: "status",
|
||||
attrs: {
|
||||
activeValue: 1,
|
||||
inactiveValue: 0
|
||||
},
|
||||
col: {
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
},
|
||||
initialValue: 0
|
||||
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
|
||||
// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
|
||||
export default reactive(modalConfig);
|
||||
48
src/views/inventory/classification/config/config.ts
Normal file
48
src/views/inventory/classification/config/config.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
export interface options {
|
||||
label: string;
|
||||
value: string | number;
|
||||
[property: string]: any;
|
||||
}
|
||||
export interface optionObject {
|
||||
[property: string]: options[];
|
||||
}
|
||||
const options: optionObject = {
|
||||
payType: [
|
||||
{ label: "现金", value: "cash" },
|
||||
{ label: "微信", value: "weixin" },
|
||||
{ label: "银行卡", value: "bank" },
|
||||
{ label: "会员支付", value: "member-account" },
|
||||
{ label: "支付宝", value: "alipay" },
|
||||
{ label: "刷卡", value: "deposit" },
|
||||
{ label: "挂单", value: "arrears" },
|
||||
{ label: "刷卡", value: "deposit" },
|
||||
{ label: "储值", value: "member-account" },
|
||||
{ label: "自定义", value: "virtual" },
|
||||
],
|
||||
isIdeal: [
|
||||
{ label: "否", value: 0 },
|
||||
{ label: "是", value: 1 },
|
||||
]
|
||||
};
|
||||
|
||||
export const switchAttr = {
|
||||
"active-value": 1,
|
||||
"inactive-value": 0,
|
||||
}
|
||||
|
||||
|
||||
export type optionsType = string;
|
||||
|
||||
export function returnOptions(type: optionsType) {
|
||||
return options[type];
|
||||
}
|
||||
|
||||
export function returnOptionsLabel(optionsType: optionsType, value: string | number) {
|
||||
const options = returnOptions(optionsType);
|
||||
if (!options) {
|
||||
return "";
|
||||
}
|
||||
const option = options.find((item) => item.value === value);
|
||||
return option ? option.label : "";
|
||||
}
|
||||
|
||||
57
src/views/inventory/classification/config/content.ts
Normal file
57
src/views/inventory/classification/config/content.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
import Api from "@/api/product/cons-group";
|
||||
import type { IContentConfig } from "@/components/CURD/types";
|
||||
|
||||
const contentConfig: IContentConfig = {
|
||||
pageName: "sys:user",
|
||||
table: {
|
||||
border: true,
|
||||
highlightCurrentRow: true,
|
||||
},
|
||||
pagination: {
|
||||
background: true,
|
||||
layout: "prev,pager,next,jumper,total,sizes",
|
||||
pageSize: 20,
|
||||
pageSizes: [10, 20, 30, 50],
|
||||
},
|
||||
indexAction: function (params) {
|
||||
return Api.getList({});
|
||||
},
|
||||
modifyAction: function (data) {
|
||||
return Api.edit(data);
|
||||
},
|
||||
pk: "id",
|
||||
toolbar: ["add"],
|
||||
defaultToolbar: ["refresh", "filter", "search"],
|
||||
cols: [
|
||||
// { type: "selection", width: 50, align: "center" },
|
||||
{
|
||||
label: "ID",
|
||||
align: "center",
|
||||
prop: "id",
|
||||
},
|
||||
{
|
||||
label: "耗材类型名称",
|
||||
align: "center",
|
||||
prop: "name",
|
||||
},
|
||||
|
||||
{
|
||||
label: "状态",
|
||||
align: "center",
|
||||
prop: "status",
|
||||
templet: 'custom',
|
||||
slotName: 'switch'
|
||||
},
|
||||
|
||||
{
|
||||
label: "操作",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 280,
|
||||
templet: "tool",
|
||||
operat: ["edit"],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default contentConfig;
|
||||
53
src/views/inventory/classification/config/edit.ts
Normal file
53
src/views/inventory/classification/config/edit.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import Api from "@/api/product/cons-group";
|
||||
|
||||
|
||||
import { returnOptions, switchAttr } from "./config";
|
||||
import type { IModalConfig } from "@/components/CURD/types";
|
||||
|
||||
const modalConfig: IModalConfig = {
|
||||
pageName: "sys:user",
|
||||
dialog: {
|
||||
title: "编辑耗材分类",
|
||||
width: 800,
|
||||
draggable: true,
|
||||
},
|
||||
form: {
|
||||
labelWidth: 140,
|
||||
},
|
||||
formAction: function (data) {
|
||||
return Api.edit({ ...data, });
|
||||
},
|
||||
beforeSubmit(data) {
|
||||
console.log("提交之前处理", data);
|
||||
},
|
||||
formItems: [
|
||||
|
||||
{
|
||||
label: "耗材类型名称",
|
||||
prop: "name",
|
||||
rules: [{ required: true, message: "请输入耗材类型名称", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入耗材类型名称",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "switch",
|
||||
label: "是否启用",
|
||||
prop: "status",
|
||||
attrs: {
|
||||
activeValue: 1,
|
||||
inactiveValue: 0
|
||||
},
|
||||
col: {
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
},
|
||||
initialValue: 0
|
||||
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
|
||||
// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
|
||||
export default reactive(modalConfig);
|
||||
21
src/views/inventory/classification/config/search.ts
Normal file
21
src/views/inventory/classification/config/search.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import type { ISearchConfig } from "@/components/CURD/types";
|
||||
|
||||
const searchConfig: ISearchConfig = {
|
||||
pageName: "sys:user",
|
||||
formItems: [
|
||||
{
|
||||
type: "input",
|
||||
label: "版本号",
|
||||
prop: "keywords",
|
||||
attrs: {
|
||||
placeholder: "请输入版本号",
|
||||
clearable: true,
|
||||
style: {
|
||||
width: "200px",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default searchConfig;
|
||||
115
src/views/inventory/classification/index.vue
Normal file
115
src/views/inventory/classification/index.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 列表 -->
|
||||
<!-- 搜索 -->
|
||||
<!-- <page-search
|
||||
ref="searchRef"
|
||||
:search-config="searchConfig"
|
||||
@query-click="handleQueryClick"
|
||||
@reset-click="handleResetClick"
|
||||
/> -->
|
||||
<!-- 列表 -->
|
||||
<page-content
|
||||
ref="contentRef"
|
||||
:content-config="contentConfig"
|
||||
@add-click="handleAddClick"
|
||||
@edit-click="handleEditClick"
|
||||
@export-click="handleExportClick"
|
||||
@search-click="handleSearchClick"
|
||||
@toolbar-click="handleToolbarClick"
|
||||
@operat-click="handleOperatClick"
|
||||
@filter-change="handleFilterChange"
|
||||
>
|
||||
<template #status="scope">
|
||||
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
|
||||
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #options="scope">
|
||||
{{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
|
||||
</template>
|
||||
<template #switch="scope">
|
||||
<el-switch
|
||||
v-model="scope.row[scope.prop]"
|
||||
disabled
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
></el-switch>
|
||||
</template>
|
||||
<template #mobile="scope">
|
||||
<el-text>{{ scope.row[scope.prop] }}</el-text>
|
||||
<copy-button
|
||||
v-if="scope.row[scope.prop]"
|
||||
:text="scope.row[scope.prop]"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</template>
|
||||
</page-content>
|
||||
|
||||
<!-- 新增 -->
|
||||
<page-modal
|
||||
ref="addModalRef"
|
||||
:modal-config="addModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
></page-modal>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<page-modal
|
||||
ref="editModalRef"
|
||||
:modal-config="editModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
></page-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import VersionApi from "@/api/system/version";
|
||||
import type { IObject, IOperatData } from "@/components/CURD/types";
|
||||
import usePage from "@/components/CURD/usePage";
|
||||
import addModalConfig from "./config/add";
|
||||
import contentConfig from "./config/content";
|
||||
import editModalConfig from "./config/edit";
|
||||
import searchConfig from "./config/search";
|
||||
import { returnOptionsLabel } from "./config/config";
|
||||
|
||||
const {
|
||||
searchRef,
|
||||
contentRef,
|
||||
addModalRef,
|
||||
editModalRef,
|
||||
handleQueryClick,
|
||||
handleResetClick,
|
||||
// handleAddClick,
|
||||
// handleEditClick,
|
||||
handleSubmitClick,
|
||||
handleExportClick,
|
||||
handleSearchClick,
|
||||
handleFilterChange,
|
||||
} = usePage();
|
||||
|
||||
// 新增
|
||||
async function handleAddClick() {
|
||||
addModalRef.value?.setModalVisible();
|
||||
// addModalConfig.formItems[2]!.attrs!.data =
|
||||
}
|
||||
// 编辑
|
||||
async function handleEditClick(row: IObject) {
|
||||
editModalRef.value?.handleDisabled(false);
|
||||
editModalRef.value?.setModalVisible();
|
||||
// 根据id获取数据进行填充
|
||||
console.log(row);
|
||||
editModalRef.value?.setFormData({ ...row });
|
||||
}
|
||||
1;
|
||||
// 其他工具栏
|
||||
function handleToolbarClick(name: string) {
|
||||
console.log(name);
|
||||
if (name === "custom1") {
|
||||
ElMessage.success("点击了自定义1按钮");
|
||||
}
|
||||
}
|
||||
// 其他操作列
|
||||
async function handleOperatClick(data: IOperatData) {
|
||||
console.log(data);
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user