feat: 商品列表，绑定耗材

src/api/product/index.ts

@@ -41,6 +41,24 @@ const AuthAPI = {
       method: "delete",
     });
   },
+  // 退款退回
+  refundToStock(data: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/refundToStock`,
+      method: "post",
+      data,
+    });
+  },
+
+  // 耗材列表
+  productcons(params: any) {
+    return request<any, Responseres>({
+      url: `/product/admin/product/cons/page`,
+      method: "get",
+      params
+    });
+  },
+
   // 上下架
   onOff(data: any) {
     return request<any, Responseres>({
@@ -79,6 +97,14 @@ const AuthAPI = {
       data,
     });
   },
+  // 商品-绑定耗材
+  bind(data: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/bind`,
+      method: "post",
+      data,
+    });
+  },
   // 库存预警
   stockWarning(data: any) {
     return request<any, Responseres>({

src/views/product/index.vue

@@ -34,15 +34,17 @@
         <copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
       </template>
       <template #consumables="scope">
-        <span style="color: #4080ff;" v-if="scope.row.consName">
-          {{ scope.row.consName }}
-        </span>
-        <span v-else>
-          绑定
-        </span>
-        <el-icon @click="editOpen" style="cursor: pointer;color: #4080ff;">
-          <EditPen />
-        </el-icon>
+        <template v-if="scope.row.type != null">
+          <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;">
+            <EditPen />
+          </el-icon>
+        </template>
       </template>
 
     </page-content>
@@ -70,7 +72,7 @@
       </el-form>
     </MyDialog>
     <!-- 报损 -->
-    <MyDialog ref="myDialogRefbaosun" @confirm="confirmbaosun" title="修改库存预警">
+    <MyDialog ref="myDialogRefbaosun" @confirm="confirmbaosun" title="报损">
       <el-form :model="form">
         <el-form-item label="报损数量" label-width="">
           <el-input-number v-model="datas.number" label="描述文字"></el-input-number>
@@ -83,6 +85,56 @@
         </el-form-item>
       </el-form>
     </MyDialog>
+    <!-- 耗材绑定 -->
+    <MyDialog ref="myDialogRefhaocai" @confirm="confirmhaocai" width="50%" title="耗材绑定">
+      <el-row>
+        <el-col :span="12"> <el-form-item label="商品名">
+            {{ haocaiData.name }}
+          </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"
+              @click="handleSwitchhaocai(haocaiData.isRefundStock)"></el-switch>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-table :data="haocaiData.consList" border>
+        <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>
+            <!-- <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="surplusStock" min-width="150px">
+          <template v-slot="scope">
+            <el-input-number v-model="scope.row.surplusStock" :min="0" />
+          </template>
+        </el-table-column>
+        <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)">
+                <el-icon>
+                  <RemoveFilled />
+                </el-icon>
+              </div>
+              <div class="btn add" v-if="scope.$index == haocaiData.consList.length - 1" @click="createItem(scope.row)">
+                <el-icon>
+                  <CirclePlusFilled />
+                </el-icon>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </MyDialog>
   </div>
 </template>
 
@@ -99,7 +151,6 @@ import editModalConfig from "./indexconfig/edit";
 import searchConfig from "./indexconfig/search";
 import MyDialog from "@/components/mycomponents/myDialog.vue";
 import Statistics from "./indexconfig/statistics.vue";
-import { Search } from '@element-plus/icons-vue'
 const {
   searchRef,
   contentRef,
@@ -115,6 +166,15 @@ const {
 } = usePage();
 const router = useRouter();
 let gongjiData = ref({});
+const myDialogRef = ref(null);
+const route = useRoute();
+const myDialogRefbaosun = ref(null);
+const myDialogRefhaocai = ref(null);
+let haocaiData = ref({});
+let options = ref([]);
+const form = reactive({
+  warnLine: "",
+});
 let datas = reactive({
   number: 0,
   remark: "",
@@ -125,8 +185,18 @@ function newHandleQueryClick(e: IObject | undefined) {
   contentRef.value?.fetchPageData({ ...e, ...filterParams }, true);
   getTongji(e);
 }
-function editOpen() {
-
+function editOpen(item: any) {
+  haocaiData.value = item
+  if (haocaiData.value.consList.length == 0) {
+    let items = {
+      "productId": item.id,
+      "consInfoId": "",
+      "surplusStock": '0'
+    }
+    haocaiData.value.consList.push(items)
+  }
+  handleResetClick()
+  myDialogRefhaocai.value.open();
 }
 // 重置
 function handleResetClick2(queryParams: IObject) {
@@ -141,9 +211,7 @@ function getTongji(params: IObject | undefined) {
     gongjiData.value = res
   });
 }
-const form = reactive({
-  warnLine: "",
-});
+
 // 新增
 async function handleAddClick() {
   router.push({ name: "addgoods" });
@@ -151,7 +219,15 @@ async function handleAddClick() {
   // 加载上级规格下拉数据源
   // addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
   // 加载角色下拉数据源
-  // addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
+}
+// 生成新商品绑定耗材关系项
+function createItem(val: IObject) {
+  let item = {
+    "productId": val.productId,
+    "consInfoId": "",
+    "surplusStock": ''
+  }
+  haocaiData.value.consList.push(item)
 }
 // 上架
 function handleSwitchChange(data: any) {
@@ -171,13 +247,18 @@ function handleSwitchChangeTwo(data: any) {
   };
   UserAPI.markIsSoldOut(obj);
 }
+// 退款退回
+async function handleSwitchhaocai(row: IObject) {
+  let res = await UserAPI.refundToStock({ isReturn: row, id: haocaiData.value.id })
+  ElMessage.success('成功')
+  // myDialogRefhaocai.value.close()
+}
 
 // 编辑
 async function handleEditClick(row: IObject) {
   router.push({ name: "addgoods", query: { goods_id: row.id } });
 }
-const myDialogRef = ref(null);
-const myDialogRefbaosun = ref(null);
+
 // 其他工具栏
 function handleToolbarClick(name: string) {
   console.log(name);
@@ -192,11 +273,27 @@ async function confirm() {
   myDialogRef.value.close();
 
 }
+// 商品选择耗材
+function selectionChange(e, row) {
+  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)
   ElMessage.success("成功");
   myDialogRefbaosun.value.close();
 }
+async function confirmhaocai() {
+  let obj = {
+    consList: haocaiData.value.consList,
+    id: haocaiData.value.id
+  }
+  let res = await UserAPI.bind(obj)
+  ElMessage.success("成功");
+  handleResetClick()
+  myDialogRefhaocai.value.close();
+}
 // 商品规格
 function typeFilter(item: any) {
   if (item == "single") {
@@ -218,11 +315,35 @@ async function handleOperatClick(data: IOperatData) {
 
 }
 
-const route = useRoute();
 onMounted(() => {
   console.log(route.query);
   if (route.query.id) {
     contentRef.value?.fetchPageData({ id: route.query.id });
   }
+  // 获取耗材列表
+  gethaocaiList()
 });
+async function gethaocaiList() {
+  let res = await UserAPI.productcons({ id: route.query.id })
+  options.value = res.records
+}
 </script>
+<style scoped lang="scss">
+.table_btn_wrap {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  .btn {
+    font-size: 26px;
+
+    &.sub {
+      color: #FF4D4F;
+    }
+
+    &.add {
+      color: #52C41A;
+    }
+  }
+}
+</style>