|
@@ -0,0 +1,759 @@
|
|
|
+<template>
|
|
|
+ <div class="p20">
|
|
|
+ <!-- 功能区 -->
|
|
|
+ <el-card class="box-card">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-text class="mx-1">关键词:</el-text>
|
|
|
+
|
|
|
+ <el-input class="width200" placeholder="请输入物品名称" v-model="data.params.keyword"
|
|
|
+ @keyup.enter.native="getList"> </el-input>
|
|
|
+
|
|
|
+ <el-button type="primary" class="ml10" @click="getList">
|
|
|
+ <el-icon>
|
|
|
+ <ele-Search />
|
|
|
+ </el-icon>
|
|
|
+ 查询
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="tr">
|
|
|
+ <el-button type="primary" @click="addPage">添加</el-button>
|
|
|
+ <el-button type="danger" @click="deleteMult">批量删除</el-button>
|
|
|
+ <el-button type="default" @click="checkAll">查看全部</el-button>
|
|
|
+ <el-button type="default" @click="importExcel()">导入</el-button>
|
|
|
+ <el-button type="default" @click="exportExcel()">导出</el-button>
|
|
|
+ <el-button type="default" @click="enable">启用</el-button>
|
|
|
+ <el-button type="default" @click="forbidden">禁用</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ <!-- 主体区 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-card class="box-card mt20" v-loading="data.loading">
|
|
|
+ <!-- 列表 -->
|
|
|
+ <el-table :data="data.tableData" @selection-change="handleTableDataSelectionChange">
|
|
|
+ <!-- props绑定数据表的字段,lable填写中文 -->
|
|
|
+ <el-table-column type="selection" width="55" />
|
|
|
+ <el-table-column fixed prop="no" label="物品编码" width="150"
|
|
|
+ :default-sort="{ prop: 'date', order: 'descending' }" />
|
|
|
+ <el-table-column prop="name" label="物品名称" width="150" />
|
|
|
+ <el-table-column prop="desc" label="物品介绍" width="" />
|
|
|
+ <el-table-column prop="goodClass.name" label="物品类别" width="" />
|
|
|
+ <el-table-column prop="unit" label="单位" width="" />
|
|
|
+ <el-table-column prop="spec" label="规格" width="" />
|
|
|
+ <el-table-column prop="valid" label="是否有效" width="">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag v-if="scope.row.valid == 1">启用</el-tag>
|
|
|
+ <el-tag type="danger" v-if="scope.row.valid == 0">禁用</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="200">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button link type="primary" @click="openDetail(scope.row)">详情</el-button>
|
|
|
+ <el-button link type="primary" @click="print(scope.row)">打印</el-button>
|
|
|
+ <el-button link type="primary" @click="edit(scope.$index, scope.row)">编辑</el-button>
|
|
|
+ <el-button link type="danger" @click="deleteOne(scope.row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="yc_pagebox">
|
|
|
+ <el-pagination v-model:current-page="data.pagination.currentPage"
|
|
|
+ v-model:page-size="data.pagination.pageSize" :page-sizes="getThemeConfig.pageSizeArray"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper" :total="data.pagination.total"
|
|
|
+ @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-card class="box-card mt20" v-loading="data.classLoading">
|
|
|
+ <div class="class">
|
|
|
+ <div class="classFont">物品分类</div>
|
|
|
+ <el-button type="primary" @click="addClassPage">新增类别</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="mt20">
|
|
|
+ <el-input class="" placeholder="请输入物品分类名称" v-model="data.classParams.keyword"
|
|
|
+ @keyup.enter.native="getClass"> </el-input>
|
|
|
+ </div>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <el-table :data="data.tableClassData" style="width: 100%" @row-click="checkproduct">
|
|
|
+ <!-- props绑定数据表的字段,lable填写中文 -->
|
|
|
+ <el-table-column prop="name" label="分类名称" width="" />
|
|
|
+ <el-table-column prop="desc" label="分类说明" width="" />
|
|
|
+ <el-table-column fixed="right" label="操作" width="200">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button link type="primary"
|
|
|
+ @click.stop="classEdit(scope.$index, scope.row)">编辑</el-button>
|
|
|
+ <el-button link type="danger" @click.stop="deleteClassOne(scope.row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- 物品弹出容器 ,新增和修改的-->
|
|
|
+ <vuecmf-dialog width="1000px" :model_value="data.dialog.show" :title="data.dialog.title" @close="closePage">
|
|
|
+ <template #content>
|
|
|
+ <el-form :model="newForm" label-width="120px" ref="formRef" v-loading="data.dialog.isLoading">
|
|
|
+ <!-- 每个form-item就是一个表单的标签,label是名称,prop和v-model绑定字段名 -->
|
|
|
+ <!-- <el-form-item label="物品图片" prop="img">
|
|
|
+ <el-avatar shape="square" :size="100" fit="fill" :src="newForm.img" />
|
|
|
+ <el-text class="mx-1" type="info"
|
|
|
+ style="margin-top: -80px; margin-left: 20px;">尺寸316*316,小于100k</el-text>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="物品编码" prop="no"
|
|
|
+ :rules="[{ required: true, message: '请选择状态', trigger: 'blur' }]">
|
|
|
+ <el-input v-model="newForm.no" placeholder="填写物品代码" />
|
|
|
+ </el-form-item></el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="物品名称" prop="name"
|
|
|
+ :rules="[{ required: true, message: '请选择状态', trigger: 'blur' }]">
|
|
|
+ <el-input v-model="newForm.name" placeholder="填写物品名称" />
|
|
|
+ </el-form-item></el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="mt20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="物品单位" prop="unit">
|
|
|
+ <el-input v-model="newForm.unit" placeholder="填写物品单位" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="物品介绍" prop="desc">
|
|
|
+ <el-input v-model="newForm.desc" placeholder="填写物品介绍" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="mt20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="物品规格" prop="spec">
|
|
|
+ <el-input v-model="newForm.spec" placeholder="填写物品规格" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="物品分类" prop="good_class_id">
|
|
|
+ <el-select v-model="newForm.good_class_id" value-key="id" placeholder="选择物品分类">
|
|
|
+ <el-option v-for="item in data.region" :key="item.id" :label="item.name"
|
|
|
+ :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item class="mt20" label="状态" prop="valid"
|
|
|
+ :rules="[{ required: true, message: '请选择状态', trigger: 'blur' }]">
|
|
|
+ <el-radio-group v-model="newForm.valid">
|
|
|
+ <el-radio :label="1">启用</el-radio>
|
|
|
+ <el-radio :label="0">禁用</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="height20"></div>
|
|
|
+ </template>
|
|
|
+ <template #footer>
|
|
|
+ <el-button type="default" @click="closePage">取消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm(formRef)">确定</el-button>
|
|
|
+ </template>
|
|
|
+ </vuecmf-dialog>
|
|
|
+
|
|
|
+ <!-- 详情弹出容器-->
|
|
|
+ <vuecmf-dialog width="1000px" :model_value="data.dialogDetail.showDetail" :title="data.dialogDetail.titleDetail"
|
|
|
+ @close="closePage">
|
|
|
+ <template #content>
|
|
|
+ <el-form :model="newForm" label-width="120px" ref="formRef" v-loading="data.dialogDetail.isLoadingDetail">
|
|
|
+ <!-- 每个form-item就是一个表单的标签,label是名称,prop和v-model绑定字段名 -->
|
|
|
+ <!-- <el-form-item label="物品图片" prop="img">
|
|
|
+ <el-avatar shape="square" :size="100" fit="fill" :src="newForm.img" />
|
|
|
+ <el-text class="mx-1" type="info"
|
|
|
+ style="margin-top: -80px; margin-left: 20px;">尺寸316*316,小于100k</el-text>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="物品编码:" prop="no">
|
|
|
+ <el-text class="mx-1">{{ newForm.no }}</el-text>
|
|
|
+ </el-form-item></el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="物品名称:" prop="name">
|
|
|
+ <el-text class="mx-1">{{ newForm.name }}</el-text>
|
|
|
+ </el-form-item></el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="mt20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="物品单位:" prop="unit">
|
|
|
+ <el-text class="mx-1">{{ newForm.unit }}</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="物品介绍:" prop="desc">
|
|
|
+ <el-text class="mx-1">{{ newForm.desc }}</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="mt20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="物品规格:" prop="spec">
|
|
|
+ <el-text class="mx-1">{{ newForm.spec }}</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="物品分类:" prop="good_class_id">
|
|
|
+ <el-text class="mx-1">{{ newForm.good_class_id }}</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item class="mt20" label="状态:" prop="valid">
|
|
|
+ <el-text class="mx-1">{{ newForm.valid == 1 ? "启用" : "禁用" }}</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="height20"></div>
|
|
|
+ </template>
|
|
|
+ </vuecmf-dialog>
|
|
|
+
|
|
|
+ <!-- 物品分类弹出容器 ,新增和修改的-->
|
|
|
+ <vuecmf-dialog width="1000px" :model_value="data.classDialog.classShow" :title="data.classDialog.classTitle"
|
|
|
+ @close="closePage">
|
|
|
+ <template #content>
|
|
|
+ <el-form :model="data.form" label-width="120px" ref="formRef" v-loading="data.classDialog.classIsLoading">
|
|
|
+ <!-- 每个form-item就是一个表单的标签,label是名称,prop和v-model绑定字段名 -->
|
|
|
+ <el-form-item label="分类名称" prop="name"> <el-input v-model="data.form.name" placeholder="填写分类名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分类说明" prop="desc"> <el-input v-model="data.form.desc" placeholder="填写分类说明" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="height20"></div>
|
|
|
+ </template>
|
|
|
+ <template #footer>
|
|
|
+ <el-button type="default" @click="closePage">取消</el-button>
|
|
|
+ <el-button type="primary" @click="submitClassForm(formRef)">确定</el-button>
|
|
|
+ </template>
|
|
|
+ </vuecmf-dialog>
|
|
|
+ <ImportExcelDialog ref="importExcelDialogRef" @refresh="getTableData()" />
|
|
|
+ <ExportExcelDialog ref="exportExcelDialogRef" @refresh="getTableData()" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { defineAsyncComponent, onMounted, reactive, computed, ref, watch } from 'vue';
|
|
|
+import { storeToRefs } from 'pinia';
|
|
|
+import { useThemeConfig } from '/@/stores/themeConfig';
|
|
|
+import Good from '/@/api/model/Good'; //gzs:引入模型
|
|
|
+import GoodClass from '/@/api/model/GoodClass';//gzs:引入模型
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
+import type { FormInstance, FormRules } from 'element-plus';
|
|
|
+import router from '/@/router';
|
|
|
+// 定义变量内容
|
|
|
+const storesThemeConfig = useThemeConfig();
|
|
|
+const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
|
+// 获取布局配置信息
|
|
|
+const getThemeConfig = computed(() => {
|
|
|
+ return themeConfig.value;
|
|
|
+});
|
|
|
+const formRef = ref<FormInstance>();
|
|
|
+const multipleSelection = ref([]);
|
|
|
+//双向绑定的变量,推荐只定义1个
|
|
|
+//注意:所有变量初始化后再使用
|
|
|
+const data = reactive({
|
|
|
+ //请求查询的参数
|
|
|
+ params: {
|
|
|
+ pageSize: getThemeConfig.value.pageSize, //分页大小
|
|
|
+ page: 1, //当前页面
|
|
|
+ keyword: '', //关键字
|
|
|
+ good_class_id: null,
|
|
|
+ },
|
|
|
+ classParams: {
|
|
|
+ pageSize: getThemeConfig.value.pageSize, //分页大小
|
|
|
+ page: 1, //当前页面
|
|
|
+ keyword: '', //关键字
|
|
|
+ },
|
|
|
+ //分页组件的变量
|
|
|
+ pagination: {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: getThemeConfig.value.pageSize,
|
|
|
+ total: 100,
|
|
|
+ },
|
|
|
+ loading: false, //是否加载中
|
|
|
+ classPagination: {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: getThemeConfig.value.pageSize,
|
|
|
+ total: 100,
|
|
|
+ },
|
|
|
+ classLoading: false, //是否加载中
|
|
|
+ tableData: [], // 表格数据
|
|
|
+ tableClassData: [], //分类表格数据
|
|
|
+ //物品弹出框
|
|
|
+ dialog: {
|
|
|
+ show: false, // 是否显示弹出框,用于最大化、最小化及还原
|
|
|
+ title: '添加', // 弹出框标题
|
|
|
+ isLoading: false, //是否加载中
|
|
|
+ type: "edit" as "submit" | "edit" // 表单类型 edit|submit
|
|
|
+ },
|
|
|
+ //详情弹出框
|
|
|
+ dialogDetail: {
|
|
|
+ showDetail: false, // 是否显示弹出框,用于最大化、最小化及还原
|
|
|
+ titleDetail: '添加', // 弹出框标题
|
|
|
+ isLoadingDetail: false, //是否加载中
|
|
|
+ },
|
|
|
+ //分类弹出框
|
|
|
+ classDialog: {
|
|
|
+ classShow: false, // 是否显示弹出框,用于最大化、最小化及还原
|
|
|
+ classTitle: '添加', // 弹出框标题
|
|
|
+ classIsLoading: false, //是否加载中
|
|
|
+ },
|
|
|
+ form: {} as any, //分类新增和修改表单数据
|
|
|
+ //扫码枪
|
|
|
+ value: '',
|
|
|
+ //物品分类选择
|
|
|
+ region: [] as any,
|
|
|
+ //导出
|
|
|
+ impparam: {
|
|
|
+ date: "",
|
|
|
+ keyword: "",
|
|
|
+ product_id: "",
|
|
|
+ classes_id: "",
|
|
|
+ page: 1,
|
|
|
+ list_rows: 10,
|
|
|
+ is_sort: 0
|
|
|
+ },
|
|
|
+});
|
|
|
+/**
|
|
|
+ * 监听页数
|
|
|
+ */
|
|
|
+watch(() => [data.params.good_class_id, data.params.keyword], (count, prevCount) => {
|
|
|
+ data.params.page = 1
|
|
|
+ getList();
|
|
|
+}
|
|
|
+)
|
|
|
+
|
|
|
+// 初始化表格数据
|
|
|
+const getTableData = () => {
|
|
|
+ getList();
|
|
|
+ getClass();
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 导入、导出
|
|
|
+ */
|
|
|
+const ImportExcelDialog = defineAsyncComponent(() => import("/@/views/payrollModule/import.vue"));
|
|
|
+const importExcelDialogRef = ref();
|
|
|
+const importExcel = () => {
|
|
|
+ importExcelDialogRef.value.openDialog();
|
|
|
+};
|
|
|
+
|
|
|
+const ExportExcelDialog = defineAsyncComponent(() => import("/@/views/payrollModule/export.vue"));
|
|
|
+const exportExcelDialogRef = ref();
|
|
|
+const exportExcel = () => {
|
|
|
+ // return ElMessage.warning("功能正在完善中");
|
|
|
+ exportExcelDialogRef.value.openDialog(data.impparam);
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 实例化1个表单对象
|
|
|
+ */
|
|
|
+const newForm = reactive({
|
|
|
+ no: '',
|
|
|
+ name: '',
|
|
|
+ desc: '',
|
|
|
+ unit: '',
|
|
|
+ img: '',
|
|
|
+ spec: '',
|
|
|
+ index: 0,
|
|
|
+ good_class_id: '' as number | string,
|
|
|
+ valid: 1,
|
|
|
+});
|
|
|
+/**
|
|
|
+ * 实例化1个分类表单对象
|
|
|
+ */
|
|
|
+const newClassForm = () => {
|
|
|
+ let form = {
|
|
|
+ id: 0,
|
|
|
+ name: '',
|
|
|
+ desc: '',
|
|
|
+ valid: 1,
|
|
|
+ };
|
|
|
+ return form;
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 启用、禁用
|
|
|
+ */
|
|
|
+const enable = async () => {
|
|
|
+ const items = multipleSelection.value.map((item: any) => { item.valid = 1; return item });
|
|
|
+ let res = await Good.edit(items);
|
|
|
+ if (res.code != 0) {
|
|
|
+ ElMessage.error(res.msg);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ ElMessage.success(res.msg);
|
|
|
+ getList()
|
|
|
+};
|
|
|
+const forbidden = async () => {
|
|
|
+ const items = multipleSelection.value.map((item: any) => { item.valid = 0; return item });
|
|
|
+ let res = await Good.edit(items);
|
|
|
+ if (res.code != 0) {
|
|
|
+ ElMessage.error(res.msg);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ ElMessage.success(res.msg);
|
|
|
+ getList()
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 切换页面大小
|
|
|
+ * @param val
|
|
|
+ */
|
|
|
+const handleSizeChange = (val: number) => {
|
|
|
+ data.params.pageSize = val;
|
|
|
+ data.classParams.pageSize = val;
|
|
|
+ getList();
|
|
|
+ getClass()
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 翻页
|
|
|
+ */
|
|
|
+const handleCurrentChange = (val: number) => {
|
|
|
+ data.params.page = val;
|
|
|
+ getList();
|
|
|
+};
|
|
|
+
|
|
|
+const search = async () => {
|
|
|
+ data.params.page = 1;
|
|
|
+ await getList();
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 页面初始化方法,有就写逻辑,没有可以留空
|
|
|
+ */
|
|
|
+const init = async () => { };
|
|
|
+/**
|
|
|
+ * 获取所有分类数据
|
|
|
+ */
|
|
|
+const getAll = async () => {
|
|
|
+ data.loading = true;
|
|
|
+ const res = await GoodClass.all();
|
|
|
+ data.loading = false;
|
|
|
+ if (res.code != 0) {
|
|
|
+ ElMessage.error(res.msg);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log("getAllres", res);
|
|
|
+ data.region = res.data
|
|
|
+ console.log("data.region", data.region);
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 获取分类列表数据
|
|
|
+ */
|
|
|
+const getClass = async () => {
|
|
|
+ data.classLoading = true;
|
|
|
+ const res = await GoodClass.list({
|
|
|
+ pageParams: {
|
|
|
+ page: data.classParams.page,
|
|
|
+ size: data.classParams.pageSize,
|
|
|
+ },
|
|
|
+ keyword: data.classParams.keyword
|
|
|
+ });
|
|
|
+ data.classLoading = false;
|
|
|
+ if (res.code != 0) {
|
|
|
+ ElMessage.error(res.msg);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log("getClass", res);
|
|
|
+ data.tableClassData = res.data.data;
|
|
|
+ //分页数据赋值
|
|
|
+ // data.classPagination.total = res.data.total;
|
|
|
+ // data.classPagination.currentPage = res.data.current_page;
|
|
|
+ // data.classPagination.pageSize = res.data.per_page;
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 点击查看全部
|
|
|
+ */
|
|
|
+const checkAll = async () => {
|
|
|
+ data.params.good_class_id = null
|
|
|
+ getList();
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 点击分类选项查看物品分类
|
|
|
+ */
|
|
|
+const checkproduct = async (row: any) => {
|
|
|
+ console.log("check", row.id);
|
|
|
+ data.params.good_class_id = row.id;
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 获取分页数据
|
|
|
+ */
|
|
|
+const getList = async () => {
|
|
|
+ data.loading = true;
|
|
|
+ const res = await Good.list({
|
|
|
+ pageParams: {
|
|
|
+ page: data.params.page,
|
|
|
+ size: data.params.pageSize,
|
|
|
+ },
|
|
|
+ keyword: data.params.keyword,
|
|
|
+ good_class_id: data.params.good_class_id
|
|
|
+ }); //异步请求获取 分页数据,接口返回,0为成功,非0失败
|
|
|
+ data.loading = false;
|
|
|
+ if (res.code != 0) {
|
|
|
+ ElMessage.error(res.msg);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ data.tableData = res.data.data;
|
|
|
+ //分页数据赋值
|
|
|
+ data.pagination.total = res.data.total;
|
|
|
+ data.pagination.currentPage = res.data.current_page;
|
|
|
+ data.pagination.pageSize = res.data.per_page;
|
|
|
+};
|
|
|
+// 翻页
|
|
|
+const handleTableDataSelectionChange = (val: any) => {
|
|
|
+ multipleSelection.value = val;
|
|
|
+ console.log('lzj500🚀 ~ file: index.vue:203 ~ handleTableDataSelectionChange ~ val:', val);
|
|
|
+};
|
|
|
+//=========添加 和 编辑 删除
|
|
|
+/**
|
|
|
+ * 关闭弹出框
|
|
|
+ */
|
|
|
+const closePage = () => {
|
|
|
+ data.dialog.show = false;
|
|
|
+ data.dialogDetail.showDetail = false;
|
|
|
+ data.classDialog.classShow = false;
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 弹出新增分类页面
|
|
|
+ */
|
|
|
+const addClassPage = () => {
|
|
|
+ data.classDialog.classShow = true;
|
|
|
+ data.classDialog.classTitle = '添加分类'; //gzs:标题
|
|
|
+ data.form = newClassForm();
|
|
|
+ console.log('lzj500🚀 ~ file: index.vue:160 ~ addPage ~ dialog:', data.classDialog);
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 弹出新增页面
|
|
|
+ */
|
|
|
+const addPage = async () => {
|
|
|
+ await getAll();
|
|
|
+ data.dialog.show = true;
|
|
|
+ data.dialog.title = '添加物品'; //gzs:标题
|
|
|
+ data.dialog.type = "submit";
|
|
|
+ newForm.no = '';
|
|
|
+ newForm.desc = '';
|
|
|
+ newForm.good_class_id = '';
|
|
|
+ newForm.img = '';
|
|
|
+ newForm.unit = '';
|
|
|
+ newForm.valid = 1;
|
|
|
+ newForm.spec = '';
|
|
|
+ newForm.name = '';
|
|
|
+ console.log('lzj500🚀 ~ file: index.vue:160 ~ addPage ~ dialog:', data.dialog);
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 弹出 分类编辑页面
|
|
|
+ */
|
|
|
+const classEdit = async (index: number, item: any) => {
|
|
|
+ data.classDialog.classShow = true;
|
|
|
+ data.classDialog.classTitle = '编辑分类';
|
|
|
+ data.form = item;
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 弹出 编辑页面
|
|
|
+ */
|
|
|
+const edit = async (index: number, item: any) => {
|
|
|
+ data.dialog.show = true;
|
|
|
+ data.dialog.title = '编辑物品';
|
|
|
+ data.dialog.type = "edit";
|
|
|
+ newForm.no = item.no;
|
|
|
+ newForm.desc = item.desc;
|
|
|
+ newForm.good_class_id = item.good_class_id;
|
|
|
+ newForm.img = item.img;
|
|
|
+ newForm.unit = item.unit;
|
|
|
+ newForm.valid = item.valid;
|
|
|
+ newForm.spec = item.spec;
|
|
|
+ newForm.name = item.name;
|
|
|
+ newForm.index = item.id;
|
|
|
+ // await detail(item.id);
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 弹出详情页面
|
|
|
+ */
|
|
|
+const openDetail = async (item: any) => {
|
|
|
+ console.log("itemitem", item);
|
|
|
+
|
|
|
+ data.dialogDetail.showDetail = true;
|
|
|
+ data.dialogDetail.titleDetail = '仓库详情';
|
|
|
+ newForm.no = item.no;
|
|
|
+ newForm.desc = item.desc;
|
|
|
+ newForm.good_class_id = item.goodClass.name;
|
|
|
+ newForm.img = item.img;
|
|
|
+ newForm.unit = item.unit;
|
|
|
+ newForm.valid = item.valid;
|
|
|
+ newForm.spec = item.spec;
|
|
|
+ newForm.name = item.name;
|
|
|
+ newForm.index = item.id;
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 打印机打印
|
|
|
+ */
|
|
|
+const print = (item: any) => {
|
|
|
+ // let url = window.location.href.split('/data/good')[0];
|
|
|
+ // setTimeout(() => {
|
|
|
+ // window.open(url + `/data/print?no=${item.no}&name=${item.name}`);
|
|
|
+ // }, 500)
|
|
|
+ router.push({ name: 'printGood', query: { no: item.no, name: item.name } });
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 分类的提交 表单,新增和修改都在这里
|
|
|
+ */
|
|
|
+const submitClassForm = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.validate(async (valid) => {
|
|
|
+ if (!valid) {
|
|
|
+ console.log('error submit!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log('submit!');
|
|
|
+ let res = null;
|
|
|
+ data.classDialog.classIsLoading = true;
|
|
|
+ if (data.form?.id) {
|
|
|
+ //如果是编辑
|
|
|
+ res = await GoodClass.edit(data.form);
|
|
|
+ } else {
|
|
|
+ res = await GoodClass.add(data.form);
|
|
|
+ }
|
|
|
+ data.classDialog.classIsLoading = false;
|
|
|
+ if (res.code != 0) {
|
|
|
+ ElMessage.error(res.msg);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ ElMessage.success(res.msg);
|
|
|
+ await getClass();
|
|
|
+ search();
|
|
|
+ closePage();
|
|
|
+ });
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 提交 表单,新增和修改都在这里
|
|
|
+ */
|
|
|
+const submitForm = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.validate(async (valid) => {
|
|
|
+ if (!valid) {
|
|
|
+ console.log('error submit!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let res = null;
|
|
|
+ data.dialog.isLoading = true;
|
|
|
+ console.log("🚀 ~ file: good.vue:638 ~ formEl.validate ~ newForm:", newForm)
|
|
|
+ if (data.dialog.type == "edit") {
|
|
|
+ //如果是编辑
|
|
|
+ res = await Good.edit([{
|
|
|
+ id: newForm.index,
|
|
|
+ no: newForm.no,
|
|
|
+ name: newForm.name,
|
|
|
+ img: newForm.img,
|
|
|
+ spec: newForm.spec,
|
|
|
+ valid: newForm.valid,
|
|
|
+ unit: newForm.unit,
|
|
|
+ desc: newForm.desc,
|
|
|
+ good_class_id: newForm.good_class_id,
|
|
|
+ }])
|
|
|
+ } else {
|
|
|
+ res = await Good.add(newForm);
|
|
|
+ }
|
|
|
+ data.dialog.isLoading = false;
|
|
|
+ if (res.code != 0) {
|
|
|
+ ElMessage.error(res.msg);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ ElMessage.success(res.msg);
|
|
|
+ search();
|
|
|
+ closePage();
|
|
|
+ });
|
|
|
+};
|
|
|
+//删除分类1条数据
|
|
|
+const deleteClassOne = (item: any) => {
|
|
|
+ ElMessageBox.confirm('删除后不可恢复,确定要删除该记录吗?', '警告', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ doClassDelete(item.id);
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
+};
|
|
|
+//删除1条数据
|
|
|
+const deleteOne = (item: any) => {
|
|
|
+ ElMessageBox.confirm('删除后不可恢复,确定要删除该记录吗?', '警告', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ doDelete([item.id]);
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
+};
|
|
|
+//删除多条数据
|
|
|
+const deleteMult = (item: any) => {
|
|
|
+ if (multipleSelection.value.length == 0) {
|
|
|
+ ElMessage.error('请选择要删除的记录');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let ids = multipleSelection.value.map((item: any) => item.id);
|
|
|
+ ElMessageBox.confirm('删除后不可恢复,确定要删除选中记录吗?', '警告', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ doDelete(ids);
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
+};
|
|
|
+
|
|
|
+//执行分类删除请求
|
|
|
+const doClassDelete = async (id: any) => {
|
|
|
+ data.loading = true;
|
|
|
+ let res = await GoodClass.delete({ id });
|
|
|
+ data.loading = false;
|
|
|
+ if (res.code != 0) {
|
|
|
+ ElMessage.error(res.msg);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ await getClass();
|
|
|
+};
|
|
|
+//执行删除请求
|
|
|
+const doDelete = async (id: any) => {
|
|
|
+ data.loading = true;
|
|
|
+ let res = await Good.delete({ id });
|
|
|
+ data.loading = false;
|
|
|
+ if (res.code != 0) {
|
|
|
+ ElMessage.error(res.msg);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ await getList();
|
|
|
+};
|
|
|
+//=========页面事件
|
|
|
+/**
|
|
|
+ * 页面加载时事件
|
|
|
+ */
|
|
|
+onMounted(async () => {
|
|
|
+ getList();
|
|
|
+ getClass();
|
|
|
+ getAll();
|
|
|
+ init();
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.class {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.classFont {
|
|
|
+ color: #31373D;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.active {
|
|
|
+ color: blue;
|
|
|
+}
|
|
|
+</style>
|