feat: 商品列表增加库存开关展示
This commit is contained in:
parent
22b98fd697
commit
258704dea2
|
|
@ -2,14 +2,26 @@
|
|||
<div class="app-container">
|
||||
<!-- 列表 -->
|
||||
<!-- 搜索 -->
|
||||
<page-search ref="searchRef" :search-config="searchConfig" @query-click="newHandleQueryClick"
|
||||
@reset-click="handleResetClick2" />
|
||||
<page-search
|
||||
ref="searchRef"
|
||||
:search-config="searchConfig"
|
||||
@query-click="newHandleQueryClick"
|
||||
@reset-click="handleResetClick2"
|
||||
/>
|
||||
<!-- 顶部数据 -->
|
||||
<Statistics :data="gongjiData"></Statistics>
|
||||
<!-- 列表 -->
|
||||
<page-content ref="contentRef" :content-config="contentConfig" @add-click="handleAddClick"
|
||||
@edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick"
|
||||
@toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange">
|
||||
<page-content
|
||||
ref="contentRef"
|
||||
:content-config="contentConfig"
|
||||
@add-click="handleAddClick"
|
||||
@edit-click="handleEditClick"
|
||||
@export-click="handleExportClick"
|
||||
@search-click="handleSearchClick"
|
||||
@toolbar-click="handleToolbarClick"
|
||||
@operat-click="handleOperatClick"
|
||||
@filter-change="handleFilterChange"
|
||||
>
|
||||
<!-- <template #status="scope">
|
||||
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
|
||||
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
|
||||
|
|
@ -22,43 +34,67 @@
|
|||
<DictLabel v-model="scope.row[scope.prop]" code="gender" />
|
||||
</template>
|
||||
<template #shangjia="scope">
|
||||
<el-switch v-model="scope.row[scope.prop]" :active-value="1" :inactive-value="0"
|
||||
@click="handleSwitchChange(scope.row)"></el-switch>
|
||||
<el-switch
|
||||
v-model="scope.row[scope.prop]"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@click="handleSwitchChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
<template #isStock="scope">
|
||||
<el-switch
|
||||
disabled
|
||||
v-model="scope.row[scope.prop]"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
></el-switch>
|
||||
</template>
|
||||
|
||||
<template #kucunedit="scope">
|
||||
<template v-if="scope.row.type != null">
|
||||
{{ scope.row.stockNumber }} <el-icon @click="kucunedit(scope.row)" style="cursor: pointer;color: #4080ff;">
|
||||
{{ scope.row.stockNumber }}
|
||||
<el-icon @click="kucunedit(scope.row)" style="cursor: pointer; color: #4080ff">
|
||||
<EditPen />
|
||||
</el-icon>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template #tuikuantuihui="scope">
|
||||
<el-switch v-if="!scope.row.productId" v-model="scope.row[scope.prop]" :active-value="1" :inactive-value="0"
|
||||
@click="handleSwitchhaocai(scope.row)"></el-switch>
|
||||
<el-switch
|
||||
v-if="!scope.row.productId"
|
||||
v-model="scope.row[scope.prop]"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@click="handleSwitchhaocai(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
<template #sellOut="scope">
|
||||
<el-switch v-model="scope.row[scope.prop]" :active-value="1" :inactive-value="0"
|
||||
@click="handleSwitchChangeTwo(scope.row)"></el-switch>
|
||||
<el-switch
|
||||
v-model="scope.row[scope.prop]"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@click="handleSwitchChangeTwo(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
<template #mobile="scope">
|
||||
<el-text>{{ scope.row[scope.prop] }}</el-text>
|
||||
<copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
|
||||
<copy-button
|
||||
v-if="scope.row[scope.prop]"
|
||||
:text="scope.row[scope.prop]"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</template>
|
||||
<template #consumables="scope">
|
||||
<template v-if="scope.row.type != null">
|
||||
<span style="color: #4080ff;" v-if="scope.row.consName">
|
||||
<span style="color: #4080ff" v-if="scope.row.consName">
|
||||
{{ scope.row.consName }}
|
||||
</span>
|
||||
<span v-else>
|
||||
绑定
|
||||
</span>
|
||||
<el-icon @click="editOpen(scope.row)" style="cursor: pointer;color: #4080ff;">
|
||||
<span v-else>绑定</span>
|
||||
<el-icon @click="editOpen(scope.row)" style="cursor: pointer; color: #4080ff">
|
||||
<EditPen />
|
||||
</el-icon>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
</page-content>
|
||||
|
||||
<!-- 新增 -->
|
||||
|
|
@ -69,7 +105,11 @@
|
|||
</page-modal>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
|
||||
<page-modal
|
||||
ref="editModalRef"
|
||||
:modal-config="editModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
>
|
||||
<template #gender="scope">
|
||||
<Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
|
||||
</template>
|
||||
|
|
@ -100,9 +140,11 @@
|
|||
<!-- 耗材绑定 -->
|
||||
<MyDialog ref="myDialogRefhaocai" @confirm="confirmhaocai" width="50%" title="耗材绑定">
|
||||
<el-row>
|
||||
<el-col :span="12"> <el-form-item label="商品名">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="商品名">
|
||||
{{ haocaiData.name }}
|
||||
</el-form-item></el-col>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- <el-form-item label="退款退回库存">
|
||||
<el-switch v-model="haocaiData.isRefundStock" :active-value="1" :inactive-value="0"
|
||||
|
|
@ -114,15 +156,23 @@
|
|||
<el-table-column label="序号" type="index" width="60"></el-table-column>
|
||||
<el-table-column label="耗材名称" prop="consInfoId">
|
||||
<template v-slot="scope">
|
||||
<el-select v-model="scope.row.consInfoId" reserve-keyword placeholder="请输入关键词"
|
||||
@change="selectionChange($event, scope.row)">
|
||||
<el-option v-for="item in options" :key="item.id" :label="item.conName" :value="item.id">
|
||||
</el-option>
|
||||
<el-select
|
||||
v-model="scope.row.consInfoId"
|
||||
reserve-keyword
|
||||
placeholder="请输入关键词"
|
||||
@change="selectionChange($event, scope.row)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.conName"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<!-- <div class="tips" v-if="scope.row.stockNumber">库存：{{ scope.row.stockNumber }}</div> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单位" prop="conUnit"> </el-table-column>
|
||||
<el-table-column label="单位" prop="conUnit"></el-table-column>
|
||||
<el-table-column label="使用数量" prop="surplusStock" min-width="150px">
|
||||
<template v-slot="scope">
|
||||
<el-input-number v-model="scope.row.surplusStock" :min="0" />
|
||||
|
|
@ -131,13 +181,20 @@
|
|||
<el-table-column label="操作" width="100">
|
||||
<template v-slot="scope">
|
||||
<div class="table_btn_wrap">
|
||||
<div class="btn sub" v-if="haocaiData.consList.length > 1"
|
||||
@click="haocaiData.consList.splice(scope.$index, 1)">
|
||||
<div
|
||||
class="btn sub"
|
||||
v-if="haocaiData.consList.length > 1"
|
||||
@click="haocaiData.consList.splice(scope.$index, 1)"
|
||||
>
|
||||
<el-icon>
|
||||
<RemoveFilled />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="btn add" v-if="scope.$index == haocaiData.consList.length - 1" @click="createItem(scope.row)">
|
||||
<div
|
||||
class="btn add"
|
||||
v-if="scope.$index == haocaiData.consList.length - 1"
|
||||
@click="createItem(scope.row)"
|
||||
>
|
||||
<el-icon>
|
||||
<CirclePlusFilled />
|
||||
</el-icon>
|
||||
|
|
@ -161,7 +218,7 @@ import type { IObject, IOperatData } from "@/components/CURD/types";
|
|||
import usePage from "@/components/CURD/usePage";
|
||||
import addModalConfig from "./indexconfig/add";
|
||||
import contentConfig from "./indexconfig/content";
|
||||
import MultiImageUpload from "@/components/Upload/MultiImageUpload.vue"
|
||||
import MultiImageUpload from "@/components/Upload/MultiImageUpload.vue";
|
||||
import contentConfig2 from "./indexconfig/content2";
|
||||
import editModalConfig from "./indexconfig/edit";
|
||||
import searchConfig from "./indexconfig/search";
|
||||
|
|
@ -190,14 +247,14 @@ const myDialogRefhaocai = ref(null);
|
|||
const myDialogRefkucun = ref(null);
|
||||
let haocaiData = ref({});
|
||||
let options = ref([]);
|
||||
let kucundata = ref(0)
|
||||
let kucundata = ref(0);
|
||||
const form = reactive({
|
||||
warnLine: "",
|
||||
});
|
||||
let datas = reactive({
|
||||
number: 0,
|
||||
remark: "",
|
||||
images: []
|
||||
images: [],
|
||||
});
|
||||
function newHandleQueryClick(e: IObject | undefined) {
|
||||
const filterParams = contentRef.value?.getFilterParams();
|
||||
|
|
@ -206,25 +263,28 @@ function newHandleQueryClick(e: IObject | undefined) {
|
|||
}
|
||||
// 库存修改
|
||||
function kucunedit(item) {
|
||||
kucundata.value = item
|
||||
myDialogRefkucun.value.open()
|
||||
kucundata.value = item;
|
||||
myDialogRefkucun.value.open();
|
||||
}
|
||||
async function confirmkucun() {
|
||||
let res = await UserAPI.modifyStock({ id: kucundata.value.id, stockNumber: kucundata.value.stockNumber })
|
||||
ElMessage.success('成功')
|
||||
myDialogRefkucun.value.close()
|
||||
let res = await UserAPI.modifyStock({
|
||||
id: kucundata.value.id,
|
||||
stockNumber: kucundata.value.stockNumber,
|
||||
});
|
||||
ElMessage.success("成功");
|
||||
myDialogRefkucun.value.close();
|
||||
}
|
||||
function editOpen(item: any) {
|
||||
haocaiData.value = item
|
||||
haocaiData.value = item;
|
||||
if (haocaiData.value.consList.length == 0) {
|
||||
let items = {
|
||||
"productId": item.id,
|
||||
"consInfoId": "",
|
||||
"surplusStock": '0'
|
||||
productId: item.id,
|
||||
consInfoId: "",
|
||||
surplusStock: "0",
|
||||
};
|
||||
haocaiData.value.consList.push(items);
|
||||
}
|
||||
haocaiData.value.consList.push(items)
|
||||
}
|
||||
handleResetClick()
|
||||
handleResetClick();
|
||||
myDialogRefhaocai.value.open();
|
||||
}
|
||||
// 重置
|
||||
|
|
@ -232,12 +292,11 @@ function handleResetClick2(queryParams: IObject) {
|
|||
const filterParams = contentRef.value?.getFilterParams();
|
||||
contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
|
||||
getTongji(queryParams);
|
||||
|
||||
}
|
||||
|
||||
function getTongji(params: IObject | undefined) {
|
||||
UserAPI.statistics(params).then((res) => {
|
||||
gongjiData.value = res
|
||||
gongjiData.value = res;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -252,11 +311,11 @@ async function handleAddClick() {
|
|||
// 生成新商品绑定耗材关系项
|
||||
function createItem(val: IObject) {
|
||||
let item = {
|
||||
"productId": val.productId,
|
||||
"consInfoId": "",
|
||||
"surplusStock": ''
|
||||
}
|
||||
haocaiData.value.consList.push(item)
|
||||
productId: val.productId,
|
||||
consInfoId: "",
|
||||
surplusStock: "",
|
||||
};
|
||||
haocaiData.value.consList.push(item);
|
||||
}
|
||||
// 上架
|
||||
function handleSwitchChange(data: any) {
|
||||
|
|
@ -287,9 +346,9 @@ function handleSwitchChangethree(data: any) {
|
|||
|
||||
// 退款退回
|
||||
async function handleSwitchhaocai(row: IObject) {
|
||||
let res = await UserAPI.refundToStock({ isReturn: row.isRefundStock, id: row.id })
|
||||
ElMessage.success('成功')
|
||||
handleResetClick()
|
||||
let res = await UserAPI.refundToStock({ isReturn: row.isRefundStock, id: row.id });
|
||||
ElMessage.success("成功");
|
||||
handleResetClick();
|
||||
// myDialogRefhaocai.value.close()
|
||||
}
|
||||
|
||||
|
|
@ -307,30 +366,29 @@ function handleToolbarClick(name: string) {
|
|||
}
|
||||
}
|
||||
async function confirm() {
|
||||
let res = await UserAPI.stockWarning(form.warnLine)
|
||||
let res = await UserAPI.stockWarning(form.warnLine);
|
||||
ElMessage.success("成功");
|
||||
myDialogRef.value.close();
|
||||
|
||||
}
|
||||
// 商品选择耗材
|
||||
function selectionChange(e, row) {
|
||||
let item = options.value.find(item => item.id == e)
|
||||
row.name = item.conName
|
||||
row.conUnit = item.conUnit
|
||||
let item = options.value.find((item) => item.id == e);
|
||||
row.name = item.conName;
|
||||
row.conUnit = item.conUnit;
|
||||
}
|
||||
async function confirmbaosun() {
|
||||
let res = await UserAPI.reportDamage(datas)
|
||||
let res = await UserAPI.reportDamage(datas);
|
||||
ElMessage.success("成功");
|
||||
myDialogRefbaosun.value.close();
|
||||
}
|
||||
async function confirmhaocai() {
|
||||
let obj = {
|
||||
consList: haocaiData.value.consList,
|
||||
id: haocaiData.value.id
|
||||
}
|
||||
let res = await UserAPI.bind(obj)
|
||||
id: haocaiData.value.id,
|
||||
};
|
||||
let res = await UserAPI.bind(obj);
|
||||
ElMessage.success("成功");
|
||||
handleResetClick()
|
||||
handleResetClick();
|
||||
myDialogRefhaocai.value.close();
|
||||
}
|
||||
// 商品规格
|
||||
|
|
@ -349,9 +407,8 @@ function typeFilter(item: any) {
|
|||
}
|
||||
// 其他操作列
|
||||
async function handleOperatClick(data: IOperatData) {
|
||||
datas.productId = data.row.id
|
||||
datas.productId = data.row.id;
|
||||
myDialogRefbaosun.value.open();
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -360,11 +417,11 @@ onMounted(() => {
|
|||
contentRef.value?.fetchPageData({ id: route.query.id });
|
||||
}
|
||||
// 获取耗材列表
|
||||
gethaocaiList()
|
||||
gethaocaiList();
|
||||
});
|
||||
async function gethaocaiList() {
|
||||
let res = await UserAPI.productcons({ id: route.query.id })
|
||||
options.value = res.records
|
||||
let res = await UserAPI.productcons({ id: route.query.id });
|
||||
options.value = res.records;
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -377,11 +434,11 @@ async function gethaocaiList() {
|
|||
font-size: 26px;
|
||||
|
||||
&.sub {
|
||||
color: #FF4D4F;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.add {
|
||||
color: #52C41A;
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,6 +79,13 @@ const contentConfig: IContentConfig<UserPageQuery> = {
|
|||
// { label: "库存", align: "center", prop: "stockNumber" },
|
||||
{ label: "库存", align: "center", slotName: "kucunedit", templet: "custom", prop: "stockNumber" },
|
||||
{ label: "耗材信息", align: "center", prop: "consName", slotName: "consumables", templet: "custom", },
|
||||
{
|
||||
label: "库存开关",
|
||||
align: "center",
|
||||
prop: "isStock",
|
||||
templet: "custom",
|
||||
slotName: "isStock",
|
||||
},
|
||||
{
|
||||
label: "上架",
|
||||
align: "center",
|
||||
|
|
|
|||
Loading…
Reference in New Issue