新增第二耗材价格自动关联并计算

src/views/inventory/consumables/components/add-haocai.vue

@@ -12,7 +12,13 @@
         </el-select>
       </el-form-item>
       <el-form-item label="耗材价格" prop="price">
-        <el-input-number v-model="form.price" placeholder="请输入耗材价格"></el-input-number>
+        <div class="center">
+          <el-input-number v-model="form.price" placeholder="请输入"></el-input-number>
+          <div class="ipt">
+            第二单位价格：
+            <el-input-number v-model="twoPrice" placeholder="请输入"></el-input-number>
+          </div>
+        </div>
       </el-form-item>
       <!-- <el-form-item label="库存">
         <el-input-number v-model="form.stockNumber" placeholder="请输入库存值"></el-input-number>
@@ -23,7 +29,7 @@
       <el-form-item label="单位" prop="conUnit">
         <el-input v-model="form.conUnit" placeholder="请输入单位"></el-input>
       </el-form-item>
-      <el-alert class="u-m-t-10 u-m-b-10" title="提示" description="换算值为第二单位*第二单位转换数量=第一单位" type="warning" show-icon
+      <el-alert class="u-m-t-10 u-m-b-10" title="提示" description="换算值为第一单位*第二单位转换数量=第二单位" type="warning" show-icon
         :closable="false"></el-alert>
       <el-form-item label="预警值">
         <el-input-number v-model="form.conWarning" placeholder="请输入耗材预警值"></el-input-number>
@@ -50,9 +56,11 @@
 
 
 <script setup>
+import { ref, reactive, computed } from "vue";
 import consApi from "@/api/product/cons";
 import consGroupApi from "@/api/product/cons-group";
 import { ElMessage } from "element-plus";
+
 const consGroups = ref([]);
 const rules = {
   conName: [{ required: true, message: "请输入耗材名称", trigger: "blur" }],
@@ -94,6 +102,21 @@ const form = reactive({
   ...basicForm,
 });
 
+// 第二单位价格为计算字段：第一单位价格 * 第二单位转换数量
+const twoPrice = computed({
+  get() {
+    const p = Number(form.price || 0);
+    const c = Number(form.conUnitTwoConvert || 0);
+    return c ? Number((p * c).toFixed(2)) : 0;
+  },
+  set(val) {
+    const c = Number(form.conUnitTwoConvert || 0);
+    if (!c) return;
+    // 修改第二单位价格时，反算第一单位价格并保留两位小数
+    form.price = Number((Number(val) / c).toFixed(2));
+  },
+});
+
 const show = ref(false);
 let dialogtitle = ref("");
 function open(item) {
@@ -171,4 +194,18 @@ defineExpose({
   open,
   close,
 });
-</script>
+</script>
+
+<style scoped lang="scss">
+.center {
+  display: flex;
+  align-items: center;
+
+  .ipt {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    margin-left: 28px;
+  }
+}
+</style>

src/views/product/index.vue

@@ -2,26 +2,14 @@
   <div class="app-container">
     <!-- 列表 -->
     <!-- 搜索 -->
-    <page-search
+    <page-search ref="searchRef" :search-config="searchConfig" @query-click="newHandleQueryClick"
-      ref="searchRef"
+      @reset-click="handleResetClick2" />
-      :search-config="searchConfig"
-      @query-click="newHandleQueryClick"
-      @reset-click="handleResetClick2"
-    />
     <!-- 顶部数据 -->
     <Statistics :data="gongjiData"></Statistics>
     <!-- 列表 -->
-    <page-content
+    <page-content ref="contentRef" :content-config="contentConfig" @add-click="handleAddClick"
-      ref="contentRef"
+      @edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick"
-      :content-config="contentConfig"
+      @toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange">
-      @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 ? "启用" : "禁用" }}
@@ -34,20 +22,11 @@
         <DictLabel v-model="scope.row[scope.prop]" code="gender" />
       </template>
       <template #shangjia="scope">
-        <el-switch
+        <el-switch v-model="scope.row[scope.prop]" :active-value="1" :inactive-value="0"
-          v-model="scope.row[scope.prop]"
+          @click="handleSwitchChange(scope.row)"></el-switch>
-          :active-value="1"
-          :inactive-value="0"
-          @click="handleSwitchChange(scope.row)"
-        ></el-switch>
       </template>
       <template #isStock="scope">
-        <el-switch
+        <el-switch disabled v-model="scope.row[scope.prop]" :active-value="1" :inactive-value="0"></el-switch>
-          disabled
-          v-model="scope.row[scope.prop]"
-          :active-value="1"
-          :inactive-value="0"
-        ></el-switch>
       </template>
 
       <template #kucunedit="scope">
@@ -60,29 +39,16 @@
       </template>
 
       <template #tuikuantuihui="scope">
-        <el-switch
+        <el-switch v-if="!scope.row.productId" v-model="scope.row[scope.prop]" :active-value="1" :inactive-value="0"
-          v-if="!scope.row.productId"
+          @click="handleSwitchhaocai(scope.row)"></el-switch>
-          v-model="scope.row[scope.prop]"
-          :active-value="1"
-          :inactive-value="0"
-          @click="handleSwitchhaocai(scope.row)"
-        ></el-switch>
       </template>
       <template #sellOut="scope">
-        <el-switch
+        <el-switch v-model="scope.row[scope.prop]" :active-value="1" :inactive-value="0"
-          v-model="scope.row[scope.prop]"
+          @click="handleSwitchChangeTwo(scope.row)"></el-switch>
-          :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
+        <copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
-          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">
@@ -105,11 +71,7 @@
     </page-modal>
 
     <!-- 编辑 -->
-    <page-modal
+    <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
-      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>
@@ -156,7 +118,7 @@
         <el-table-column label="序号" type="index" width="60"></el-table-column>
         <el-table-column label="耗材名称" prop="consInfoId">
           <template v-slot="scope">
-            <el-select
+            <!-- <el-select
               v-model="scope.row.consInfoId"
               reserve-keyword
               placeholder="请输入关键词"
@@ -168,20 +130,21 @@
                 :label="item.conName"
                 :value="item.id"
               ></el-option>
-            </el-select>
+            </el-select> -->
             <!-- <div class="tips" v-if="scope.row.stockNumber">库存：{{ scope.row.stockNumber }}</div> -->
           </template>
         </el-table-column>
         <el-table-column label="单位" prop="conUnit">
           <template v-slot="scope">
-            <el-select v-model="scope.row.conUnit" reserve-keyword placeholder="请输入关键词">
+            <el-input v-model="scope.row.conUnit" readonly disabled></el-input>
+            <!-- <el-select v-model="scope.row.conUnit" reserve-keyword placeholder="请输入关键词">
               <el-option
                 v-for="item in returnConUnits(scope.row.consInfoId)"
                 :key="item"
                 :label="item"
                 :value="item"
               ></el-option>
-            </el-select>
+            </el-select> -->
           </template>
         </el-table-column>
         <el-table-column label="使用数量" prop="surplusStock" min-width="150px">
@@ -192,20 +155,13 @@
         <el-table-column label="操作" width="100">
           <template v-slot="scope">
             <div class="table_btn_wrap">
-              <div
+              <div class="btn sub" v-if="haocaiData.consList.length > 1"
-                class="btn sub"
+                @click="haocaiData.consList.splice(scope.$index, 1)">
-                v-if="haocaiData.consList.length > 1"
-                @click="haocaiData.consList.splice(scope.$index, 1)"
-              >
                 <el-icon>
                   <RemoveFilled />
                 </el-icon>
               </div>
-              <div
+              <div class="btn add" v-if="scope.$index == haocaiData.consList.length - 1" @click="createItem(scope.row)">
-                class="btn add"
-                v-if="scope.$index == haocaiData.consList.length - 1"
-                @click="createItem(scope.row)"
-              >
                 <el-icon>
                   <CirclePlusFilled />
                 </el-icon>