NurseStationUI/src/views/system/goodsInfo/index.vue
2022-10-31 08:58:42 +08:00

989 lines
28 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="100px"
>
<!-- <el-form-item label="店铺表id" prop="storeInfoId">
<el-input
v-model="queryParams.storeInfoId"
placeholder="请输入店铺表id"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>-->
<!-- <el-form-item label="商品编码" prop="goodsCode">
<el-input
v-model="queryParams.goodsCode"
placeholder="请输入商品编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<!-- <el-input
v-model="queryParams.goodsPurpose"
placeholder="请输入商品用途买卖BUSINESS租赁LEASE"
clearable
@keyup.enter.native="handleQuery"
/> -->
<!-- <el-form-item label="是否上架01是" prop="whetherShelf">
<el-input
v-model="queryParams.whetherShelf"
placeholder="请输入是否上架01是"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<!-- <el-form-item label="上架时间yyyy-MM-dd HH:mm:ss" prop="shelfTime">
<el-date-picker clearable
v-model="queryParams.shelfTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择上架时间yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-form-item>
<el-form-item label="商品图片路径" prop="goodsPictureUrl">
<el-input
v-model="queryParams.goodsPictureUrl"
placeholder="请输入商品图片路径"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="商品概述" prop="goodsRemark">
<el-input
v-model="queryParams.goodsRemark"
placeholder="请输入商品概述"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="商品度量单位" prop="goodsUnit">
<el-input
v-model="queryParams.goodsUnit"
placeholder="请输入商品度量单位"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<!-- <el-form-item label="显示顺序" prop="sort">
<el-input
v-model="queryParams.sort"
placeholder="请输入显示顺序"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<el-form-item label="商品名称" prop="goodsName">
<el-input
v-model="queryParams.goodsName"
placeholder="请输入商品名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="商品分类名称" prop="goodsCategoryName">
<el-input
v-model="queryParams.goodsCategoryName"
placeholder="请输入商品分类名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="护理站名称" prop="nurseStationName">
<el-input
v-model="queryParams.nurseStationName"
placeholder="请输入护理站名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="商品用途" prop="goodsPurpose">
<el-select v-model="queryParams.goodsPurpose" placeholder="请选择">
<el-option
v-for="item in goods"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="是否上架" prop="whetherShelf">
<el-select v-model="queryParams.whetherShelf" placeholder="请选择">
<el-option
v-for="item in options"
: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"
v-hasPermi="['system:goodsInfo:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:goodsInfo:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:goodsInfo:remove']"
>删除</el-button
>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:goodsInfo:export']"
>导出</el-button
>
</el-col> -->
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="goodsInfoList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="商品编码" align="center" prop="goodsCode" />
<el-table-column
label="商品名称"
align="center"
prop="goodsName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="商品分类名称"
align="center"
prop="goodsCategoryName"
/>
<el-table-column
label="护理站名称"
align="center"
prop="nurseStationName"
/>
<el-table-column label="商品用途" align="center" prop="goodsPurpose">
<template slot-scope="scope">
{{ scope.row.goodsPurpose == "BUSINESS" ? "买卖" : "" }}
{{ scope.row.goodsPurpose == "LEASE" ? "租赁" : "" }}
</template>
</el-table-column>
<el-table-column label="上架状态" align="center" prop="whetherShelf">
<template slot-scope="scope">
<el-switch
v-model="scope.row.whetherShelf"
active-color="#13ce66"
inactive-color="#ff4949"
@change="upwhetherShelf(scope.row)"
>
</el-switch>
</template>
</el-table-column>
<el-table-column
label="上架时间"
align="center"
prop="shelfTime"
width="180"
>
<template slot-scope="scope">
<div v-if="scope.row.whetherShelf">{{ scope.row.shelfTime }}</div>
<div v-else></div>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>chaxun
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:goodsInfo:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-search"
@click="reference(scope.row)"
v-hasPermi="['system:goodsInfo:remove']"
>查询商品信息</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="1200px"
append-to-body
>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="100px"
:inline="true"
>
<el-form-item label="商品名称" prop="goodsName">
<el-input
v-model="form.goodsName"
placeholder="请输入商品名称"
style="width: 210px"
/>
</el-form-item>
<el-form-item label="护理站名称" prop="nurseStationName">
<el-select
style="width: 210px"
v-model="form.nurseStationId"
clearable
placeholder="请选择护理站"
>
<el-option
v-for="item in nurseStationlist"
:key="item.nurseStationId"
:label="item.nurseStationName"
:value="item.nurseStationId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品分类名称" prop="goodsCategoryName">
<el-select
style="width: 210px"
v-model="form.goodsCategoryId"
clearable
placeholder="请选择商品分类名称"
>
<el-option
v-for="item in goodsCategorylist"
:key="item.id"
:label="item.goodsCategoryName"
:value="item.id"
>
</el-option>
</el-select>
<!-- <el-input
v-model="form.goodsCategoryName"
placeholder="请输入商品分类名称"
style="width: 210px"
/> -->
</el-form-item>
<el-form-item label="商品用途" prop="goodsPurpose">
<el-select
v-model="form.goodsPurpose"
placeholder="请选择"
style="width: 210px"
>
<el-option
v-for="item in goods"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品度量单位" prop="goodsUnit">
<el-input
v-model="form.goodsUnit"
placeholder="请输入商品度量单位"
style="width: 210px"
/>
</el-form-item>
<el-form-item label="商品图片" prop="goodsPictureUrl">
<stationAcatar
@imgUrl="imgUrl"
:img="form.goodsPictureUrl"
:type="'goodsPictureUrl'"
/>
</el-form-item>
<el-table
ref="goodDetailsLists"
:data="goodDetailsLists"
label-width="50px"
style="margin-top: 20px"
>
<el-table-column label="商品属性名称" align="center">
<template slot-scope="scope">
<el-input
v-model="scope.row.attributeName"
maxlength="40"
></el-input>
</template>
</el-table-column>
<el-table-column label="商品单价" align="center">
<template slot-scope="scope">
<el-input
v-model="scope.row.goodsPrice"
maxlength="40"
></el-input>
</template>
</el-table-column>
<el-table-column label="库存" align="center">
<template slot-scope="scope">
<el-input
v-model="scope.row.goodsStock"
maxlength="40"
></el-input>
</template>
</el-table-column>
<el-table-column label="显示顺序" align="center">
<template slot-scope="scope">
<el-input
v-model="scope.row.attributeDetailsSort"
maxlength="40"
></el-input>
</template>
</el-table-column>
<el-table-column label="商品属性图片" align="center">
<template slot-scope="scope">
<stationAcatar
@imgUrl="attributePitureUrl"
@item="attributePitureitem"
:img="scope.row.attributePitureUrl"
:type="'attributePitureUrl'"
:item="scope.row"
/>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="addgoodAttributeDetail"
>新增</el-button
>
<el-button
size="mini"
type="text"
@click="delgoodAttributeDetail(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-form-item
label="商品概述"
prop="goodsRemark"
style="margin-top: 20px"
>
<editor
:min-height="100"
style="width: 90%; margin: 0 auto"
v-model="form.goodsRemark"
></editor>
</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>
<!-- 查看商品详情 -->
<el-dialog
:title="title"
:visible.sync="open2"
width="1000px"
append-to-body
>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="100px"
:inline="true"
>
<el-form-item label="商品名称" prop="goodsName">
<el-input
v-model="form.goodsName"
placeholder="请输入商品名称"
style="width: 210px"
:disabled="true"
/>
</el-form-item>
<el-form-item label="护理站名称" prop="nurseStationName">
<el-select
style="width: 210px"
clearable
v-model="form.nurseStationId"
placeholder="请选择护理站"
:disabled="true"
>
<el-option
v-for="item in nurseStationlist"
:key="item.nurseStationId"
:label="item.nurseStationName"
:value="item.nurseStationId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品分类名称" prop="goodsCategoryName">
<el-select
style="width: 210px"
v-model="form.goodsCategoryId"
clearable
placeholder="请选择商品分类名称"
:disabled="true"
>
<el-option
v-for="item in goodsCategorylist"
:key="item.id"
:label="item.goodsCategoryName"
:value="item.id"
>
</el-option>
</el-select>
<!-- <el-input
v-model="form.goodsCategoryName"
placeholder="请输入商品分类名称"
style="width: 210px"
/> -->
</el-form-item>
<el-form-item label="商品用途" prop="goodsPurpose">
<el-select
v-model="form.goodsPurpose"
placeholder="请选择"
style="width: 210px"
:disabled="true"
>
<el-option
v-for="item in goods"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品度量单位" prop="goodsUnit">
<el-input
v-model="form.goodsUnit"
placeholder="请输入商品度量单位"
style="width: 210px"
:disabled="true"
/>
</el-form-item>
<el-form-item label="商品图片" prop="goodsPictureUrl">
<img
:src="form.goodsPictureUrl"
alt=""
style="width: 150px; height: 150px"
/>
</el-form-item>
<el-table
ref="goodDetailsLists"
:data="goodDetailsLists"
label-width="50px"
style="margin-top: 20px"
>
<el-table-column
label="商品属性名称"
align="center"
prop="attributeName"
>
</el-table-column>
<el-table-column label="商品单价" align="center" prop="goodsPrice">
</el-table-column>
<el-table-column label="库存" align="center" prop="goodsStock">
</el-table-column>
<el-table-column
label="显示顺序"
align="center"
prop="attributeDetailsSort"
>
</el-table-column>
<el-table-column label="商品属性图片" align="center">
<template slot-scope="scope">
<img
:src="scope.row.attributePitureUrl"
alt=""
style="width: 100px; height: 100px"
/>
</template>
</el-table-column>
</el-table>
<el-form-item
label="商品概述"
prop="goodsRemark"
style="margin-top: 20px"
>
<textarea
style="margin-left: 30px"
v-model="form.goodsRemark"
name=""
id=""
cols="130"
rows="10"
:disabled="true"
></textarea>
<!-- <editor
:min-height="100"
style="width: 90%; margin: 0 auto"
v-model="form.goodsRemark"
:disabled="true"
></editor> -->
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open2 = false">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listGoodsInfo,
getGoodsInfo,
delGoodsInfo,
addGoodsInfo,
updateGoodsInfo,
goodsInfoList,
listStation,
goodsCategory,
editGoodsWhetherShelf,
} from "@/api/system/goodsInfo";
import editor from "@/components/Editor";
import stationAcatar from "../stationAvatar/index.vue";
import baseurl from "@/api/baseurl.js";
export default {
components: { stationAcatar, editor },
name: "GoodsInfo",
data() {
return {
imageUrl: "", //商品图片
value: "",
datas: null,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 商品基本信息表格数据
goodsInfoList: [],
// 护理站列表
nurseStationlist: [],
// 查询商品分类列表
goodsCategorylist: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
open2: false,
goods: [
{
value: "BUSINESS",
label: "买卖",
},
{
value: "LEASE",
label: "租赁",
},
],
options: [
{
value: 0,
label: "否",
},
{
value: 1,
label: "是",
},
],
// goodAttributeDetailsLists:[],
goodDetailsLists: [
{
attributePitureUrl: "",
goodsPrice: "",
goodsStock: "",
sort: "",
ids: 9999,
},
],
ids: 9999,
// 查询参数
shangjia: {
id: null,
whetherShelf: null,
},
queryParams: {
id: null,
pageNum: 1,
pageSize: 10,
storeInfoId: null,
nurseStationId: null,
goodsCategoryId: null,
goodsName: null,
goodsCode: null,
whetherShelf: null,
shelfTime: null,
goodsPictureUrl: null,
goodsRemark: null,
goodsUnit: null,
goodsPurpose: null,
sort: null,
},
// 表单参数
form: {},
// 表单校验
rules: {},
};
},
created() {
this.getList();
this.list();
},
methods: {
upwhetherShelf(row) {
console.log(row);
if (row.whetherShelf == false) {
var obj = {
id: row.goodsInfoId,
whetherShelf: 0,
};
} else if (row.whetherShelf == true) {
var obj = {
id: row.goodsInfoId,
whetherShelf: 1,
};
}
editGoodsWhetherShelf(obj).then((res) => {
console.log(obj);
if (obj.whetherShelf == 0) {
this.$modal.msgSuccess("已修改上架状态为未上架");
} else {
this.$modal.msgSuccess("已修改上架状态为上架");
}
this.getList();
});
},
/** 查询商品基本信息列表 */
getList() {
this.loading = true;
goodsInfoList(this.queryParams).then((response) => {
response.rows.forEach((e) => {
if (e.whetherShelf == 1) {
e.whetherShelf = true;
} else if (e.whetherShelf == 0) {
e.whetherShelf = false;
}
});
this.goodsInfoList = response.rows;
console.log(this.goodsInfoList);
this.total = response.total;
this.loading = false;
});
},
list() {
listStation().then((res) => {
console.log(res);
this.nurseStationlist = res.data;
});
goodsCategory().then((res) => {
console.log(this.form);
this.goodsCategorylist = res.rows;
});
},
// 添加
addgoodAttributeDetail() {
console.log(this.goodDetailsLists);
if (this.goodDetailsLists.length == 5) {
this.$message.error("最多只能5条");
} else {
this.ids++;
var obj = {
attributePitureUrl: "",
goodsPrice: "",
goodsStock: "",
sort: "",
ids: this.ids,
};
this.goodDetailsLists.push(obj);
}
},
// 删除
delgoodAttributeDetail(item) {
console.log(item);
if (item.ids && !item.id) {
if (this.goodDetailsLists.length == 1) {
this.$message.error("最后一条不可删除");
} else {
this.goodDetailsLists = this.goodDetailsLists.filter(
(e) => e.ids != item.ids
);
}
} else if (!item.ids && item.id) {
if (this.goodDetailsLists.length == 1) {
this.$message.error("最后一条不可删除");
} else {
this.goodDetailsLists = this.goodDetailsLists.filter(
(e) => e.id != item.id
);
}
}
console.log(this.goodDetailsLists);
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
this.goodDetailsLists = [
{
attributeName: "",
goodAttributeDetailsLists: [
{
attributePitureUrl: "",
goodsPrice: "",
goodsStock: "",
sort: "",
},
],
},
];
// this.goodDetailsLists = [{
// attributeName: "",
// attributePitureUrl: "",
// goodsPrice: "",
// goodsStock: "",
// sort: "",
// ids: 1,
// }]
},
// 表单重置
reset() {
this.form = {
id: null,
storeInfoId: null,
nurseStationId: null,
goodsCategoryId: null,
goodsName: null,
goodsCode: null,
whetherShelf: null,
shelfTime: null,
goodsPictureUrl: null,
goodsRemark: null,
goodsUnit: null,
goodsPurpose: null,
sort: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
console.log(selection);
this.ids = selection.map((item) => item.goodsInfoId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "商品基本信息";
this.goodDetailsLists = [
{
attributePitureUrl: "",
goodsPrice: "",
goodsStock: "",
sort: "",
ids: 99999999999999999999,
},
];
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.goodsInfoId || this.ids;
getGoodsInfo(id).then((response) => {
this.form = response.data[0];
this.goodDetailsLists = response.data[0].goodAttributeDetailsLists;
this.open = true;
this.title = "修改商品基本信息";
});
},
reference(row) {
getGoodsInfo(row.goodsInfoId).then((response) => {
response.data[0].goodsPictureUrl =
baseurl + response.data[0].goodsPictureUrl;
this.form = response.data[0];
response.data[0].goodAttributeDetailsLists.forEach((e) => {
e.attributePitureUrl = baseurl + e.attributePitureUrl;
});
this.goodDetailsLists = response.data[0].goodAttributeDetailsLists;
this.open2 = true;
});
},
/** 提交按钮 */
submitForm() {
this.form.goodDetailsLists = this.goodDetailsLists;
console.log(this.form);
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.goodsInfoId != null) {
this.form.id = this.form.goodsInfoId;
updateGoodsInfo(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addGoodsInfo(this.form).then((response) => {
console.log(this.form);
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal
.confirm("是否确认删除?")
.then(function () {
return delGoodsInfo(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
// /** 导出按钮操作 */
// handleExport() {
// this.download(
// "system/goodsInfo/export",
// {
// ...this.queryParams,
// },
// `goodsInfo_${new Date().getTime()}.xlsx`
// );
// },
imgUrl(imgUrl) {
console.log(imgUrl);
this.form.goodsPictureUrl = imgUrl;
},
attributePitureUrl(imgUrl) {
console.log(imgUrl);
// this.form.attributePitureUrl = imgUrl;
},
attributePitureitem(item) {
let items = JSON.parse(item);
if (items.ids && !items.id) {
this.goodDetailsLists.forEach((e) => {
if (e.ids == items.ids) {
e.attributePitureUrl = items.attributePitureUrl;
}
});
} else if (!items.ids && items.id) {
this.goodDetailsLists.forEach((e) => {
if (e.id == items.id) {
e.attributePitureUrl = items.attributePitureUrl;
}
});
}
},
},
};
</script>
<style lang="scss" scoped>
</style>