<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"sgi
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="编号" prop="goodsCategoryId">
<el-input
v-model="queryParams.goodsCategoryId"
placeholder="请输入编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="销售状态" prop="goodsSellStatus">
<el-select
v-model="queryParams.goodsSellStatus"
placeholder="请选择销售状态"
>
<el-option
v-for="item in sallstatus"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="postList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="商品id" align="center" prop="goodsCategoryId" />
<el-table-column label="商品名称" align="center" prop="goodsName" />
<el-table-column label="商品简介" align="center" prop="goodsIntro" />
<el-table-column
label="商品详情"
align="center"
prop="goodsDetailContent"
/>
<el-table-column label="封面图" align="center" prop="goodsCoverImg">
<template slot-scope="scope">
<el-image
style="width: 100px; height: 100px"
:src="baseUrl + scope.row.goodsCoverImg"
:fit="fill"
></el-image>
</template>
</el-table-column>
<el-table-column label="商品原价" align="center" prop="originalPrice" />
<el-table-column label="售价" align="center" prop="sellingPrice" />
<el-table-column label="商品库存" align="center" prop="stockNum" />
<el-table-column label="销售状态" align="center" prop="goodsSellStatus">
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.goodsSellStatus == 1"
>在售</el-tag
>
<el-tag type="danger" v-else>售罄</el-tag>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="商品id" prop="goodsCategoryId">
<el-input v-model="form.goodsCategoryId" placeholder="请输入商品id" />
</el-form-item>
<el-form-item label="商品名称" prop="goodsName">
<el-input v-model="form.goodsName" placeholder="请输入商品名称" />
</el-form-item>
<el-form-item label="商品简介" prop="goodsIntro">
<el-input v-model="form.goodsIntro" placeholder="请输入简介" />
</el-form-item>
<el-form-item label="商品详情" prop="goodsDetailContent">
<el-input
v-model="form.goodsDetailContent"
placeholder="请输入详情"
type="textarea"
/>
</el-form-item>
<el-form-item label="封面图" prop="goodsCoverImg"
><el-upload
class="avatar-uploader"
:action="baseUrl + '/common/upload'"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:headers="headers"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="商品原价" prop="originalPrice">
<el-input-number
v-model="form.originalPrice"
placeholder="请输入价格"
:min="0"
></el-input-number>
</el-form-item>
<el-form-item label="商品售价" prop="sellingPrice">
<el-input-number
v-model="form.sellingPrice"
placeholder="请输入价格"
:min="0"
></el-input-number>
</el-form-item>
<el-form-item label="销售状态" prop="goodsSellStatus">
<el-switch
v-model="form.goodsSellStatus"
active-color="#E7FAF0"
inactive-color="#FFEDED"
active-text="在售"
inactive-text="售罄"
:active-value="1"
:inactive-value="0"
>
</el-switch
></el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listPost,
getPost,
delPost,
addPost,
updatePost,
} from "../../api/spmk/list";
import { getToken } from "@/utils/auth";
export default {
data() {
return {
sallstatus: [
{ label: "上架", value: 1 },
{ label: "下架", value: 0 },
],
baseUrl: process.env.VUE_APP_BASE_API,
headers: {
Authorization: "Bearer " + getToken(),
},
imageUrl: "",
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 岗位表格数据
postList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
postCode: undefined,
postName: undefined,
status: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
postName: [
{ required: true, message: "岗位名称不能为空", trigger: "blur" },
],
postCode: [
{ required: true, message: "岗位编码不能为空", trigger: "blur" },
],
postSort: [
{ required: true, message: "岗位顺序不能为空", trigger: "blur" },
],
},
};
},
created() {
this.getList();
},
methods: {
handleAvatarSuccess(file) {
console.log("文件》》", file);
this.imageUrl = file.url;
this.form.upload = file.fileName;
},
// 查询
getList() {
this.loading = true;
listPost(this.queryParams).then((response) => {
console.log("在这>>>", response);
this.postList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.form.goodsCoverImg = "";
this.imageUrl = ""; // 清除图片链接
this.reset();
},
// 表单重置
reset() {
this.form = {
goodsCoverImg: "",
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.postId);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加岗位";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const goodsId = row.goodsId || this.ids;
getPost(goodsId).then((response) => {
this.imageUrl = response.data.goodsCoverImg
? this.baseUrl + response.data.goodsCoverImg
: "";
this.form = response.data;
this.open = true;
this.title = "修改岗位";
});
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.goodsId != undefined) {
this.form.goodsCoverImg = this.form.upload;
updatePost(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addPost(this.form).then((response) => {
this.form.goodsCoverImg = this.form.upload;
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const goodsId = row.goodsId || this.ids;
this.$modal
.confirm('是否确认删除编号为"' + goodsId + '"的数据项？')
.then(function () {
return delPost(goodsId);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/post/export",
{
...this.queryParams,
},
`post_${new Date().getTime()}.xlsx`
);
},
},
};
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<template>
<div id="test_app">
<!--echarts的容器-->
<div
id="main"
style="width: 100%; height: 520px; background: #fff"
ref="main1"
></div>
<div
id="main2"
style="width: 100%; height: 520px; background-color: #fff"
></div>
<div
id="main3"
style="width: 100%; height: 520px; background-color: #fff"
></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "",
data() {
return {
charts: "",
opinionData: ["155", "400", "900", "800", "300", "900", "270"], //数据
opinionData2: [
{
value: "155",
name: "电视台1",
},
{
value: "400",
name: "电视台2",
},
{
value: "900",
name: "电视台3",
},
{
value: "800",
name: "电视台4",
},
{
value: "300",
name: "电视台5",
},
{
value: "900",
name: "电视台6",
},
{
value: "270",
name: "电视台7",
},
], //数据2
opinionData3: ["155", "400", "900", "800", "300", "900", "270"], //数据2
};
},
methods: {
// 1
drawLine1() {
this.charts = echarts.init(this.$refs.main1);
this.charts.setOption({
title: {
left: "3%",
top: "5%",
text: "最近一周订单数量", //标题文本，支持使用 \n 换行。
},
tooltip: {
trigger: "axis",
},
legend: {
align: "right", //文字在前图标在后
left: "3%",
top: "15%",
data: ["近一周"],
},
grid: {
top: "30%",
left: "5%",
right: "5%",
bottom: "5%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: true,
axisTick: {
alignWithLabel: true, //保证刻度线和标签对齐
},
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], //x坐标的名称
},
yAxis: {
type: "value",
boundaryGap: true,
splitNumber: 4, //纵坐标数
interval: 250, //强制设置坐标轴分割间隔
},
series: [
{
name: "近一周",
type: "line", //折线图line;柱形图bar;饼图pie
stack: "总量",
smooth: true,
itemStyle: {
color: "rgb(255,96,64)", //改变折线点的颜色
lineStyle: {
color: "rgb(255,96,64)", //改变折线颜色
},
},
data: this.opinionData,
},
],
});
},
// 2
drawLine2() {
this.charts = echarts.init(document.getElementById("main2"));
this.charts.setOption({
title: {
left: "3%",
top: "5%",
text: "最近电视台收视率", //标题文本，支持使用 \n 换行。
},
xAxis: {
type: "category",
data: ["Monday", "周二", "周三", "周四", "周五", "周六", "周日"], //x坐标的名称
},
yAxis: {
type: "value",
// boundaryGap: true,
// splitNumber: 4, //纵坐标数
// interval: 250, //强制设置坐标轴分割间隔
},
series: [
{
name: "近一周",
type: "bar", //折线图line;柱形图bar;饼图pie
stack: "总量",
areaStyle: {
//显示区域颜色---渐变效果
color: {
global: false, // 缺省为 false
},
},
data: this.opinionData3,
},
],
});
},
drawLine3() {
this.charts = echarts.init(document.getElementById("main3"));
this.charts.setOption({
title: {
text: "最近电视台收视率",
},
tooltip: {
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
series: [
{
center: ["25%", "50%"],
name: "郭杰大煞笔",
type: "pie",
data: this.opinionData2,
},
{
center: ["75%", "50%"],
name: "郭杰大loser",
type: "pie",
data: [
{
value: "154",
name: "电视台1",
},
{
value: "111",
name: "电视台2",
},
{
value: "222",
name: "电视台3",
},
{
value: "333",
name: "电视台4",
},
{
value: "444",
name: "电视台5",
},
{
value: "555",
name: "电视台6",
},
{
value: "666",
name: "电视台7",
},
], //数据2,
},
],
});
},
},
//调用
mounted() {
this.drawLine1();
this.drawLine2();
this.drawLine3();
},
};
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
