xinyin025/smart-admin
1
0
Fork 0
mirror of https://github.com/1024-lab/smart-admin.git synced 2026-07-17 08:56:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

v3.9.0【优化】typescript版本;【优化】App端消息;【优化】弹出层z-index;

Browse Source
This commit is contained in:
zhuoda
2024-11-04 20:21:05 +08:00
parent c3d267e83c
commit 472d059453
1376 changed files with 10373 additions and 9712 deletions
Download Patch File Download Diff File Expand all files Collapse all files
smart-admin-web-javascript/src/views/business/erp/goods/components/goods-form-modal.vue
+152
View File
@@ -0,0 +1,152 @@
<!--
* 商品表单
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-07-21 21:55:12
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-drawer :title="form.goodsId ? '编辑' : '添加'" :width="500" :open="visible" :body-style="{ paddingBottom: '80px' }" @close="onClose">
<a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
<a-form-item label="商品分类" name="categoryId">
<CategoryTree v-model:value="form.categoryId" placeholder="请选择商品分类" :categoryType="CATEGORY_TYPE_ENUM.GOODS.value" />
</a-form-item>
<a-form-item label="商品名称" name="goodsName">
<a-input v-model:value="form.goodsName" placeholder="请输入商品名称" />
</a-form-item>
<a-form-item label="商品状态" name="goodsStatus">
<SmartEnumSelect enum-name="GOODS_STATUS_ENUM" v-model:value="form.goodsStatus" />
</a-form-item>
<a-form-item label="产地" name="place">
<DictSelect width="100%" key-code="GODOS_PLACE" v-model:value="form.place" mode="tags" />
</a-form-item>
<a-form-item label="上架状态" name="shelvesFlag">
<a-radio-group v-model:value="form.shelvesFlag">
<a-radio :value="true">上架</a-radio>
<a-radio :value="false">下架</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="商品价格" name="price">
<a-input-number style="width: 100%" placeholder="请输入商品价格" v-model:value="form.price" :min="0" />
</a-form-item>
<a-form-item label="备注" name="remark">
<a-input style="width: 100%" placeholder="请输入备注" v-model:value="form.remark" />
</a-form-item>
</a-form>
<div
:style="{
position: 'absolute',
right: 0,
bottom: 0,
width: '100%',
borderTop: '1px solid #e9e9e9',
padding: '10px 16px',
background: '#fff',
textAlign: 'right',
zIndex: 1,
}"
>
<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
<a-button type="primary" @click="onSubmit">提交</a-button>
</div>
</a-drawer>
</template>
<script setup>
import { ref, nextTick, reactive } from 'vue';
import CategoryTree from '/@/components/business/category-tree-select/index.vue';
import { CATEGORY_TYPE_ENUM } from '/@/constants/business/erp/category-const';
import { message } from 'ant-design-vue';
import { SmartLoading } from '/@/components/framework/smart-loading';
import { GOODS_STATUS_ENUM } from '/@/constants/business/erp/goods-const';
import _ from 'lodash';
import { goodsApi } from '/@/api/business/goods/goods-api';
import { smartSentry } from '/@/lib/smart-sentry';
import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';
import DictSelect from '/@/components/support/dict-select/index.vue';
// emit
const emit = defineEmits(['reloadList']);
// 组件ref
const formRef = ref();
const formDefault = {
//商品分类
categoryId: undefined,
//商品名称
goodsName: undefined,
//商品状态
goodsStatus: GOODS_STATUS_ENUM.APPOINTMENT.value,
//产地
place: [],
//商品价格
price: undefined,
//上架状态
shelvesFlag: true,
//备注
remark: '',
//商品id
goodsId: undefined,
};
let form = reactive({ ...formDefault });
const rules = {
categoryId: [{ required: true, message: '请选择商品分类' }],
goodsName: [{ required: true, message: '商品名称不能为空' }],
goodsStatus: [{ required: true, message: '商品状态不能为空' }],
price: [{ required: true, message: '商品价格不能为空' }],
place: [{ required: true, message: '产地不能为空' }],
};
// 是否展示抽屉
const visible = ref(false);
function showDrawer(rowData) {
Object.assign(form, formDefault);
if (rowData && !_.isEmpty(rowData)) {
Object.assign(form, rowData);
}
if (form.place && form.place.length > 0) {
form.place = form.place.map((e) => e.valueCode);
}
visible.value = true;
nextTick(() => {
formRef.value.clearValidate();
});
}
function onClose() {
Object.assign(form, formDefault);
visible.value = false;
}
function onSubmit() {
formRef.value
.validate()
.then(async () => {
SmartLoading.show();
try {
if (form.goodsId) {
await goodsApi.updateGoods(form);
} else {
await goodsApi.addGoods(form);
}
message.success(`${form.goodsId ? '修改' : '添加'}成功`);
onClose();
emit('reloadList');
} catch (error) {
smartSentry.captureError(error);
} finally {
SmartLoading.hide();
}
})
.catch((error) => {
console.log('error', error);
message.error('参数验证错误，请仔细填写表单数据!');
});
}
defineExpose({
showDrawer,
});
</script>
smart-admin-web-javascript/src/views/business/erp/goods/goods-list.vue
+446
View File
@@ -0,0 +1,446 @@
<!--
* 商品列表
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-07-21 21:55:12
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<!---------- 查询表单form begin ----------->
<a-form class="smart-query-form">
<a-row class="smart-query-form-row" v-privilege="'goods:query'">
<a-form-item label="商品分类" class="smart-query-form-item">
<category-tree
width="150px"
v-model:value="queryForm.categoryId"
placeholder="请选择商品分类"
:categoryType="CATEGORY_TYPE_ENUM.GOODS.value"
/>
</a-form-item>
<a-form-item label="商品名称" class="smart-query-form-item">
<a-input style="width: 200px" v-model:value="queryForm.searchWord" placeholder="商品名称" />
</a-form-item>
<a-form-item label="产地" name="place" class="smart-query-form-item">
<DictSelect key-code="GODOS_PLACE" v-model:value="queryForm.place" width="120px" />
</a-form-item>
<a-form-item label="商品状态" name="goodsStatus" class="smart-query-form-item">
<SmartEnumSelect enum-name="GOODS_STATUS_ENUM" v-model:value="queryForm.goodsStatus" width="160px" />
</a-form-item>
<a-form-item label="快速筛选" class="smart-query-form-item">
<a-radio-group v-model:value="queryForm.shelvesFlag" @change="onSearch">
<a-radio-button :value="undefined">全部</a-radio-button>
<a-radio-button :value="true">上架</a-radio-button>
<a-radio-button :value="false">下架</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item class="smart-query-form-item">
<a-button-group>
<a-button type="primary" @click="onSearch" v-privilege="'goods:query'">
<template #icon>
<ReloadOutlined />
</template>
查询
</a-button>
<a-button @click="resetQuery" v-privilege="'goods:query'">
<template #icon>
<SearchOutlined />
</template>
重置
</a-button>
</a-button-group>
</a-form-item>
</a-row>
</a-form>
<!---------- 查询表单form end ----------->
<a-card size="small" :bordered="false" :hoverable="true">
<!---------- 表格操作行 begin ----------->
<a-row class="smart-table-btn-block">
<div class="smart-table-operate-block">
<a-button @click="addGoods" type="primary" v-privilege="'goods:add'">
<template #icon>
<PlusOutlined />
</template>
新建
</a-button>
<a-button @click="confirmBatchDelete" danger :disabled="selectedRowKeyList.length === 0" v-privilege="'goods:batchDelete'">
<template #icon>
<DeleteOutlined />
</template>
批量删除
</a-button>
<a-button @click="showImportModal" type="primary" v-privilege="'goods:importGoods'">
<template #icon>
<ImportOutlined />
</template>
导入
</a-button>
<a-button @click="onExportGoods" type="primary" v-privilege="'goods:exportGoods'">
<template #icon>
<ExportOutlined />
</template>
导出
</a-button>
</div>
<div class="smart-table-setting-block">
<TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.ERP.GOODS" :refresh="queryData" />
</div>
</a-row>
<!---------- 表格操作行 end ----------->
<a-table
size="small"
:dataSource="tableData"
:columns="columns"
rowKey="goodsId"
bordered
:pagination="false"
:showSorterTooltip="false"
:row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
@change="onChange"
>
<template #bodyCell="{ text, record, column }">
<template v-if="column.dataIndex === 'place'">
<span>{{ text && text.length > 0 ? text.map((e) => e.valueName).join(',') : '' }}</span>
</template>
<template v-if="column.dataIndex === 'goodsStatus'">
<span>{{ $smartEnumPlugin.getDescByValue('GOODS_STATUS_ENUM', text) }}</span>
</template>
<template v-if="column.dataIndex === 'shelvesFlag'">
<span>{{ text ? '上架' : '下架' }}</span>
</template>
<template v-if="column.dataIndex === 'action'">
<div class="smart-table-operate">
<a-button @click="addGoods(record)" type="link" v-privilege="'goods:update'">编辑</a-button>
<a-button @click="deleteGoods(record)" danger type="link" v-privilege="'goods:delete'">删除</a-button>
</div>
</template>
</template>
</a-table>
<div class="smart-query-table-page">
<a-pagination
showSizeChanger
showQuickJumper
show-less-items
:pageSizeOptions="PAGE_SIZE_OPTIONS"
:defaultPageSize="queryForm.pageSize"
v-model:current="queryForm.pageNum"
v-model:pageSize="queryForm.pageSize"
:total="total"
@change="queryData"
@showSizeChange="queryData"
:show-total="(total) => `共${total}条`"
/>
</div>
<GoodsFormModal ref="formModal" @reloadList="queryData" />
<a-modal v-model:open="importModalShowFlag" title="导入" @onCancel="hideImportModal" @ok="hideImportModal">
<div style="text-align: center; width: 400px; margin: 0 auto">
<a-button @click="downloadExcel"> <download-outlined />第一步：下载模板</a-button>
<br />
<br />
<a-upload
v-model:fileList="fileList"
name="file"
:multiple="false"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
accept=".xls,.xlsx"
:before-upload="beforeUpload"
@remove="handleRemove"
>
<a-button>
<upload-outlined />
第二步：选择文件
</a-button>
</a-upload>
<br />
<a-button @click="onImportGoods">
<ImportOutlined />
第三步：开始导入
</a-button>
</div>
</a-modal>
</a-card>
</template>
<script setup>
import GoodsFormModal from './components/goods-form-modal.vue';
import { reactive, ref, onMounted } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { SmartLoading } from '/@/components/framework/smart-loading';
import { goodsApi } from '/@/api/business/goods/goods-api';
import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
import CategoryTree from '/@/components/business/category-tree-select/index.vue';
import { CATEGORY_TYPE_ENUM } from '/@/constants/business/erp/category-const';
import { smartSentry } from '/@/lib/smart-sentry';
import TableOperator from '/@/components/support/table-operator/index.vue';
import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
import { GOODS_STATUS_ENUM } from '/@/constants/business/erp/goods-const';
import DictSelect from '/@/components/support/dict-select/index.vue';
import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';
import { FILE_FOLDER_TYPE_ENUM } from '/@/constants/support/file-const.js';
import FileUpload from '/@/components/support/file-upload/index.vue';
import _ from 'lodash';
// ---------------------------- 表格列 ----------------------------
const columns = ref([
{
title: '商品分类',
dataIndex: 'categoryName',
},
{
title: '商品名称',
dataIndex: 'goodsName',
},
{
title: '商品状态',
dataIndex: 'goodsStatus',
sorter: true
},
{
title: '产地',
dataIndex: 'place',
},
{
title: '商品价格',
dataIndex: 'price',
sorter: true
},
{
title: '上架状态',
dataIndex: 'shelvesFlag',
sorter: true
},
{
title: '备注',
dataIndex: 'remark',
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 150,
},
{
title: '操作',
dataIndex: 'action',
fixed: 'right',
width: 100,
},
]);
// ---------------------------- 查询数据表单和方法 ----------------------------
const queryFormState = {
categoryId: undefined,
searchWord: '',
goodsStatus: undefined,
place: undefined,
shelvesFlag: undefined,
goodsType: undefined,
pageNum: 1,
pageSize: 10,
sortItemList: []
};
// 查询表单form
const queryForm = reactive(_.cloneDeep(queryFormState));
// 表格加载loading
const tableLoading = ref(false);
// 表格数据
const tableData = ref([]);
// 总数
const total = ref(0);
// 重置查询条件
function resetQuery() {
let pageSize = queryForm.pageSize;
Object.assign(queryForm, _.cloneDeep(queryFormState));
queryForm.pageSize = pageSize;
queryData();
}
// 搜索
function onSearch() {
queryForm.pageNum = 1;
queryData();
}
// 查询数据
async function queryData() {
tableLoading.value = true;
try {
let queryResult = await goodsApi.queryGoodsList(queryForm);
tableData.value = queryResult.data.list;
total.value = queryResult.data.total;
} catch (e) {
smartSentry.captureError(e);
} finally {
tableLoading.value = false;
}
}
onMounted(queryData);
// ---------------------------- 添加/修改 ----------------------------
const formModal = ref();
function addGoods(goodsData) {
formModal.value.showDrawer(goodsData);
}
// ---------------------------- 单个删除 ----------------------------
function deleteGoods(goodsData) {
Modal.confirm({
title: '提示',
content: '确定要删除【' + goodsData.goodsName + '】吗?',
okText: '删除',
okType: 'danger',
onOk() {
singleDelete(goodsData);
},
cancelText: '取消',
onCancel() {},
});
}
async function singleDelete(goodsData) {
try {
SmartLoading.show();
await goodsApi.deleteGoods(goodsData.goodsId);
message.success('删除成功');
queryData();
} catch (e) {
smartSentry.captureError(e);
} finally {
SmartLoading.hide();
}
}
// ---------------------------- 批量删除 ----------------------------
// 选择表格行
const selectedRowKeyList = ref([]);
function onSelectChange(selectedRowKeys) {
selectedRowKeyList.value = selectedRowKeys;
}
// 批量删除
function confirmBatchDelete() {
Modal.confirm({
title: '提示',
content: '确定要删除选中商品吗?',
okText: '删除',
okType: 'danger',
onOk() {
batchDelete();
},
cancelText: '取消',
onCancel() {},
});
}
async function batchDelete() {
try {
SmartLoading.show();
await goodsApi.batchDelete(selectedRowKeyList.value);
message.success('删除成功');
queryData();
} catch (e) {
smartSentry.captureError(e);
} finally {
SmartLoading.hide();
}
}
// ------------------------------- 导出和导入 ---------------------------------
// 导入弹窗
const importModalShowFlag = ref(false);
const fileList = ref([]);
// 显示导入
function showImportModal() {
fileList.value = [];
importModalShowFlag.value = true;
}
// 关闭 导入
function hideImportModal() {
importModalShowFlag.value = false;
}
function handleChange() {}
function handleDrop() {}
function handleRemove(file) {
const index = fileList.value.indexOf(file);
const newFileList = fileList.value.slice();
newFileList.splice(index, 1);
fileList.value = newFileList;
}
function beforeUpload(file) {
fileList.value = [...(fileList.value || []), file];
return false;
}
function downloadExcel() {
window.open('https://smartadmin.vip/cdn/%E5%95%86%E5%93%81%E6%A8%A1%E6%9D%BF.xls');
}
async function onImportGoods() {
const formData = new FormData();
fileList.value.forEach((file) => {
formData.append('file', file.originFileObj);
});
SmartLoading.show();
try {
let res = await goodsApi.importGoods(formData);
message.success(res.msg);
} catch (e) {
smartSentry.captureError(e);
} finally {
SmartLoading.hide();
}
}
async function onExportGoods() {
await goodsApi.exportGoods();
}
function onChange(pagination, filters, sorter, { action }){
if (action === 'sort') {
const { order, field } = sorter;
let column = camelToUnderscore(field);
let findIndex = queryForm.sortItemList.findIndex(e => e.column === column);
if (findIndex !== -1) {
queryForm.sortItemList.splice(findIndex, 1);
}
if (order) {
let isAsc = order !== 'ascend';
queryForm.sortItemList.push({
column,
isAsc
});
}
queryData();
}
}
function camelToUnderscore(str) {
return str.replace(/([A-Z])/g, "_$1").toLowerCase();
}
</script>