feat: 商品列表增加库存开关展示

src/views/product/index.vue

@@ -2,14 +2,26 @@
   <div class="app-container">
     <!-- 列表 -->
     <!-- 搜索 -->
-    <page-search ref="searchRef" :search-config="searchConfig" @query-click="newHandleQueryClick"
+    <page-search
-      @reset-click="handleResetClick2" />
+      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"
+    <page-content
-      @edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick"
+      ref="contentRef"
-      @toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange">
+      :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"
+        <el-switch
-          @click="handleSwitchChange(scope.row)"></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"
+        <el-switch
-          @click="handleSwitchhaocai(scope.row)"></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"
+        <el-switch
-          @click="handleSwitchChangeTwo(scope.row)"></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 v-else>绑定</span>
-            绑定
+          <el-icon @click="editOpen(scope.row)" style="cursor: pointer; color: #4080ff">
-          </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="请输入关键词"
+            <el-select
-              @change="selectionChange($event, scope.row)">
+              v-model="scope.row.consInfoId"
-              <el-option v-for="item in options" :key="item.id" :label="item.conName" :value="item.id">
+              reserve-keyword
-              </el-option>
+              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"
+              <div
-                @click="haocaiData.consList.splice(scope.$index, 1)">
+                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
+  kucundata.value = item;
-  myDialogRefkucun.value.open()
+  myDialogRefkucun.value.open();
 }
 async function confirmkucun() {
-  let res = await UserAPI.modifyStock({ id: kucundata.value.id, stockNumber: kucundata.value.stockNumber })
+  let res = await UserAPI.modifyStock({
-  ElMessage.success('成功')
+    id: kucundata.value.id,
-  myDialogRefkucun.value.close()
+    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,
+      productId: item.id,
-      "consInfoId": "",
+      consInfoId: "",
-      "surplusStock": '0'
+      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,
+    productId: val.productId,
-    "consInfoId": "",
+    consInfoId: "",
-    "surplusStock": ''
+    surplusStock: "",
-  }
+  };
-  haocaiData.value.consList.push(item)
+  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 })
+  let res = await UserAPI.refundToStock({ isReturn: row.isRefundStock, id: row.id });
-  ElMessage.success('成功')
+  ElMessage.success("成功");
-  handleResetClick()
+  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)
+  let item = options.value.find((item) => item.id == e);
-  row.name = item.conName
+  row.name = item.conName;
-  row.conUnit = item.conUnit
+  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
+    id: haocaiData.value.id,
-  }
+  };
-  let res = await UserAPI.bind(obj)
+  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 })
+  let res = await UserAPI.productcons({ id: route.query.id });
-  options.value = res.records
+  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;
     }
   }
 }

src/views/product/indexconfig/content.ts

@@ -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",