|
|
@@ -0,0 +1,171 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div v-show="!commodityManageFormState.show">
|
|
|
+ <transition name="fade">
|
|
|
+ <div>
|
|
|
+ <el-form ref="queryFormRef" :model="queryParams">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="输入搜索：" prop="name">
|
|
|
+ <el-input v-model="queryParams.name" placeholder="请输入报告名称" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="服务分类：" prop="serviceClass">
|
|
|
+ <el-select v-model="queryParams.serviceClass" clearable>
|
|
|
+ <!--<el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="服务状态：" prop="serviceStatus">
|
|
|
+ <el-select v-model="queryParams.serviceStatus" clearable>
|
|
|
+ <!--<el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-button type="primary" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button @click="resetQuery">重置</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete(selectedRow)">删除</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button plain icon="Upload" @click="handleImport">导入</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- 表格组件 -->
|
|
|
+ <el-table ref="multipleTable" v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="编号" align="center" prop="id" />
|
|
|
+ <el-table-column label="商品名称" align="center" prop="name" />
|
|
|
+ <el-table-column label="定价" align="center" prop="fixedPrice" />
|
|
|
+ <el-table-column label="售价" align="center" prop="price" />
|
|
|
+ <el-table-column label="访问量" align="center" prop="visit" />
|
|
|
+ <el-table-column label="支付数" align="center" prop="payAmount" />
|
|
|
+ <el-table-column label="销量" align="center" prop="sales" />
|
|
|
+ <el-table-column label="退款数" align="center" prop="refundAmount" />
|
|
|
+ <el-table-column label="接口数" align="center" prop="" />
|
|
|
+ <el-table-column label="调用数" align="center" prop="" />
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-text class="common-btn-text-primary" @click="handleView(scope.row)">查看</el-text>
|
|
|
+ <el-text class="common-btn-text-danger" @click="handleDelete(scope.row)">删除</el-text>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="getList" />
|
|
|
+ </div>
|
|
|
+ <CommodityManageForm v-if="commodityManageFormState.show" @onCancel="commodityManageFormState.show = false" @onConfirm="handleCommodityManageFormState" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="CommodityManage">
|
|
|
+import CommodityManageForm from "@/views/commodityManage/CommodityManageForm.vue";
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const queryFormRef = ref();
|
|
|
+// 搜索条件
|
|
|
+const queryParams = reactive({
|
|
|
+ name: '',
|
|
|
+ serviceClass: '',
|
|
|
+ page: '',
|
|
|
+ page_size: ''
|
|
|
+});
|
|
|
+// 表格数据
|
|
|
+const dataList = ref([{}]);
|
|
|
+// 加载中
|
|
|
+const loading = ref(false);
|
|
|
+// 总数
|
|
|
+const total = ref(0);
|
|
|
+// 表格选中的所有id
|
|
|
+const ids = ref([]);
|
|
|
+// 表格选中一个
|
|
|
+const single = ref(true);
|
|
|
+// 表格选中多个
|
|
|
+const multiple = ref(true);
|
|
|
+// 选中行的数据
|
|
|
+const selectedRow = ref(null);
|
|
|
+// 新增弹窗参数
|
|
|
+const commodityManageFormState = ref({
|
|
|
+ show: false,
|
|
|
+ id: ''
|
|
|
+})
|
|
|
+
|
|
|
+// 获取数据
|
|
|
+const getList = () => {
|
|
|
+ loading.value = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ loading.value = false;
|
|
|
+ }, 500)
|
|
|
+}
|
|
|
+// 点击查询
|
|
|
+const handleQuery = () => {
|
|
|
+ commodityManageFormState
|
|
|
+ queryParams.page = 1;
|
|
|
+ getList();
|
|
|
+};
|
|
|
+
|
|
|
+// 重置查询条件
|
|
|
+const resetQuery = () => {
|
|
|
+ if (queryFormRef.value) {
|
|
|
+ queryFormRef.value.resetFields(); // 重置表单并清除校验状态
|
|
|
+ }
|
|
|
+ getList();
|
|
|
+};
|
|
|
+
|
|
|
+// 删除按钮操作
|
|
|
+const handleDelete = (row) => {
|
|
|
+ proxy?.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(() => {
|
|
|
+ getList();
|
|
|
+ proxy?.$modal.msgSuccess('删除成功');
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 展示新增修改界面
|
|
|
+const handleAdd = (id) => {
|
|
|
+ commodityManageFormState.value.id = true;
|
|
|
+ commodityManageFormState.value.show = true;
|
|
|
+};
|
|
|
+
|
|
|
+// 新增修改确认回调
|
|
|
+const handleCommodityManageFormState = () => {
|
|
|
+ commodityManageFormState.value.show = false;
|
|
|
+ handleQuery();
|
|
|
+};
|
|
|
+
|
|
|
+const handleView = () => {};
|
|
|
+
|
|
|
+// 多选框选中数据
|
|
|
+const handleSelectionChange = (selection) => {
|
|
|
+ ids.value = selection.map((item) => item.reportId);
|
|
|
+ selectedRow.value = selection.length === 1 ? selection[0] : null;
|
|
|
+ single.value = selection.length != 1;
|
|
|
+ multiple.value = !selection.length;
|
|
|
+};
|
|
|
+
|
|
|
+//导入
|
|
|
+const handleImport = () => {};
|
|
|
+
|
|
|
+// 导出
|
|
|
+const handleExport = () => {};
|
|
|
+
|
|
|
+getList();
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+</style>
|
