NurseStationOperateUI/src/views/system/goodsInfo/index.vue
2022-11-14 13:44:07 +08:00

982 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="所属护理站" prop="nurseStationName">
<el-select
v-model="queryParams.nurseStationId"
placeholder="请选择护理站"
v-loadmore="loadMore"
>
<el-option
v-for="item in nurseStationlist"
:key="item.id"
:label="item.nurseStationName"
:value="item.id"
>
</el-option>
</el-select>
</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="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>
<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="nurseStationName"
/>
<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="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" prop="createTime" />
<el-table-column label="创建人" align="center" prop="createBy" />
<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-delete"
@click="handleDelete(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="120px"
:inline="true"
>
<el-form-item label="商品名称" prop="goodsName">
<el-input
v-model="form.goodsName"
placeholder="请输入商品名称"
max="40"
style="width: 210px"
/>
</el-form-item>
<el-form-item label="护理站名称" prop="nurseStationName">
<el-input
v-model="form.nurseStationName"
placeholder="请输入商品名称"
max="40"
style="width: 210px"
disabled
/>
</el-form-item>
<el-form-item label="商品分类名称" prop="goodsCategoryId">
<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-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"
type="number"
oninput=" if(value.length>7){value=value.slice(0,7)}"
></el-input>
</template>
</el-table-column>
<el-table-column label="库存" align="center">
<template slot-scope="scope">
<el-input
v-model="scope.row.goodsStock"
type="number"
oninput="if(value.length>9){value=value.slice(0,9)}"
></el-input>
</template>
</el-table-column>
<el-table-column label="显示顺序" align="center">
<template slot-scope="scope">
<el-input
v-model="scope.row.attributeDetailsSort"
type="number"
oninput=" if(value.length>9){value=value.slice(0,9)}"
></el-input>
</template>
</el-table-column>
<el-table-column label="商品属性图片" align="center" width="300">
<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="innerVisible"
width="1000px"
append-to-body
:before-close="addcancel"
>
<el-form
ref="queryForm"
:model="getListByUserquery"
:rules="rules"
label-width="80px"
:inline="true"
>
<el-form-item
label="护理站编码"
prop="nurseStationCode"
label-width="120"
>
<el-input
v-model="getListByUserquery.nurseStationCode"
placeholder="请输入护理站编码"
clearable
/>
</el-form-item>
<el-form-item
label="护理站名称"
prop="nurseStationName"
label-width="120"
>
<el-input
v-model="getListByUserquery.nurseStationName"
placeholder="请输入护理站名称"
clearable
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery2"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery2"
>重置</el-button
>
</el-form-item>
</el-form>
<el-table :data="nurseStationlist" @cell-dblclick="nurseclick">
<el-table-column label="请选择" width="100" align="center">
<template slot-scope="scope">
<el-button
type="primary"
style="width: 15px; height: 15px"
v-if="nurseStationId == scope.row.id"
circle
@click="nurseclick(scope.row)"
></el-button>
<el-button
v-else
style="width: 15px; height: 15px"
circle
@click="nurseclick(scope.row)"
></el-button>
</template>
</el-table-column>
<el-table-column
property="nurseStationCode"
label="护理站编码"
align="center"
>
</el-table-column>
<el-table-column
property="nurseStationName"
label="护理站名称"
align="center"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column property="phone" label="联系电话" align="center">
</el-table-column>
<el-table-column
property="address"
label="护理站地址"
align="center"
:show-overflow-tooltip="true"
>
</el-table-column>
</el-table>
<pagination
v-show="total2 > 0"
:total="total2"
:page.sync="getListByUserquery.pageNum"
:limit.sync="getListByUserquery.pageSize"
@pagination="handleQuery2"
/>
</el-dialog> -->
</div>
</template>
<script>
import {
getGoodsInfo,
delGoodsInfo,
addGoodsInfo,
updateGoodsInfo,
updatePicture,
goodsInfoList,
goodsCategory,
editGoodsWhetherShelf,
} from "@/api/system/goodsInfo";
import editor from "@/components/Editor";
import { getListByUser } from "@/api/system/userlist.js";
import stationAcatar from "../stationAvatar/index.vue";
import baseurl from "@/api/baseurl.js";
export default {
components: { stationAcatar, editor },
name: "OperateGoodsInfo",
data() {
return {
imgone: "",
imageUrl: "", //商品图片
value: "",
datas: null,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
total2: 0,
// 商品基本信息表格数据
goodsInfoList: [],
// 护理站列表
nurseStationlist: [],
// 查询商品分类列表
goodsCategorylist: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// open2: false,
innerVisible: false,
// StationName: "请选择所属护理站",
nursetotal: 0,
nurseStationId: null,
goods: [
{
value: "BUSINESS",
label: "买卖",
},
{
value: "LEASE",
label: "租赁",
},
],
options: [
{
value: 0,
label: "",
},
{
value: 1,
label: "",
},
],
// goodAttributeDetailsLists:[],
goodDetailsLists: [],
ids: 9999999,
// 查询参数
shangjia: {
id: null,
whetherShelf: null,
},
getListByUserquery: {
pageNum: 1,
pageSize: 10,
},
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,
// mame:null,
},
//权限查询
getListByUserquery: {
pageNum: 1,
pageSize: 10,
},
// 表单参数
form: {
nurseStationName:"",
nurseStationId:"",
},
// 表单校验
rules: {
goodsName: [
{ required: true, message: "请输入商品名称", trigger: "blur" },
],
goodsCategoryId: [
{ required: true, message: "请选择商品分类名称", trigger: "blur" },
],
nurseStationId: [
{ required: true, message: "请选择所属护理站", trigger: "blur" },
],
goodsPurpose: [
{ required: true, message: "请选择商品用途", trigger: "blur" },
],
goodsUnit: [
{ required: true, message: "请输入商品度量单位", trigger: "blur" },
],
goodsPictureUrl: [
{ required: true, message: "请输入选择图片", trigger: "blur" },
],
},
};
},
created() {
this.getList();
this.info();
// this.getList2();
},
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;
});
},
// 添加
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.attributeDetailsId) {
if (this.goodDetailsLists.length == 1) {
this.$message.error("最后一条不可删除");
} else {
this.goodDetailsLists = this.goodDetailsLists.filter(
(e) => e.ids != item.ids
);
}
} else if (!item.ids && item.attributeDetailsId) {
if (this.goodDetailsLists.length == 1) {
this.$message.error("最后一条不可删除");
} else {
this.goodDetailsLists = this.goodDetailsLists.filter(
(e) => e.attributeDetailsId != item.attributeDetailsId
);
}
}
console.log(this.goodDetailsLists);
},
// 取消按钮
cancel() {
console.log(this.form);
var obj = { pictureUrlList: [] };
if (this.imgone!= this.form.goodsPictureUrl) {
obj.pictureUrlList.push(this.form.goodsPictureUrl);
}
if (obj.pictureUrlList.length > 0) {
updatePicture(obj).then((res) => {
console.log(res);
});
}
this.open = false;
this.reset();
this.StationName = "请选择所属护理站";
this.goodDetailsLists = [
{
attributeName: "",
goodAttributeDetailsLists: [
{
attributePitureUrl: "",
goodsPrice: "",
goodsStock: "",
sort: "",
},
],
},
];
},
// clickinnerVisible() {
// this.innerVisible = true;
// },
// nurseclick(row) {
// console.log(this.form);
// console.log(row);
// this.form.nurseStationId = row.id;
// this.StationName = row.nurseStationName;
// this.innerVisible = false;
// },
handleQuery2() {
// this.getListByUserquery.pageNum = 1;
this.getList2();
},
getList2(){
getListByUser(this.getListByUserquery).then((res) => {
this.total2 = res.total;
this.nurseStationlist = res.rows;
});
},
resetQuery2() {
this.resetForm("queryForm");
(this.getListByUserquery = {
pageNum: 1,
pageSize: 10,
}),
this.handleQuery2();
},
addcancel() {
// this.innerVisible = false;
// this.innerVisiblexg = false;
this.resetQuery2();
},
// 表单重置
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.goodDetailsLists = [
{
attributePitureUrl: "",
goodsPrice: "",
goodsStock: "",
sort: "",
ids: 9999999,
},
];
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
if (this.nurseStationlist[0].isAdmin == '1') {
this.resetForm("queryForm");
this.queryParams = {
pageNum: 1,
pageSize: 10
}
} else {
this.queryParams.pageNum = 1;
this.queryParams.pageSize = 10
this.queryParams.goodsName = null
this.queryParams.goodsCategoryName = null
this.queryParams.goodsPurpose = null
}
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.form.nurseStationName=this.nurseStationlist[0].nurseStationName
this.form.nurseStationId =this.nurseStationlist[0].id;
this.title = "商品基本信息";
this.StationName = "请选择所属护理站";
this.goodDetailsLists = [
{
attributePitureUrl: "",
goodsPrice: "",
goodsStock: "",
sort: "",
ids: 9999999,
},
];
this.open = true;
},
/** 修改按钮操作 */
handleUpdate(row) {
console.log(row)
this.reset();
const id = row.goodsInfoId || this.ids;
getGoodsInfo(id).then((response) => {
console.log(response)
this.form = response.data[0];
this.form.nurseStationName = row.nurseStationName
this.imgone = this.form.goodsPictureUrl;
if (response.data[0].goodAttributeDetailsLists) {
this.goodDetailsLists = response.data[0].goodAttributeDetailsLists;
}
this.open = true;
this.title = "修改商品基本信息";
});
},
/** 提交按钮 */
submitForm() {
console.log(this.form);
console.log(this.goodDetailsLists);
this.form.goodAttributeDetailsLists = [];
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 {
// this.nurseStationId=this.form.nurseStationId
addGoodsInfo(this.form).then((response) => {
console.log(this.form);
this.$modal.msgSuccess("新增成功");
// this.StationName = "请选择所属护理站";
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
console.log("row :>> ", row);
this.$confirm("是否确认删除订单信息的数据项", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
delGoodsInfo(row.goodsInfoId).then((res) => {
this.$message.success("删除成功");
this.getList();
// console.log('this.OrderDetailsList :>> ', this.OrderDetailsList);
});
})
.catch(() => { });
},
// 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.attributeDetailsId) {
this.goodDetailsLists.forEach((e) => {
if (e.attributeDetailsId == items.attributeDetailsId) {
e.attributePitureUrl = items.attributePitureUrl;
}
});
}
},
//权限列表
info() {
goodsCategory().then((res) => {
console.log(this.form);
this.goodsCategorylist = res.rows;
});
getListByUser(this.getListByUserquery).then((res) => {
console.log(res)
if (res.rows[0].isAdmin == "1") {
this.nurseStationlist = res.rows;
// console.log(this.queryParams)
this.total2 = res.total;
} else {
this.total2 = res.total;
this.nurseStationlist = res.rows;
this.queryParams.nurseStationId = res.rows[0].id;
this.handleQuery();
}
});
},
//滑动下拉框
loadMore() {
var a = Math.ceil(this.total2 / 10);
if (this.nurseStationlist.length + 1 >= this.total2) {
} else {
if (this.getListByUserquery.pageNum >= a) {
} else {
this.getListByUserquery.pageNum++;
getListByUser(this.getListByUserquery).then((res) => {
res.rows.forEach((e) => {
this.nurseStationlist.push(e);
});
});
}
}
},
},
};
</script>
<style lang="scss" scoped>
</style>