perf(view/frozen/sale) 修改数据输入|显示方式

编号输入通过下拉列表选取(维护一个全局字典实现)
修改页面删除了部分与修改操作无关字段

src/api/frozen/sale.js

@@ -42,3 +42,10 @@ export function delSale(id) {
     method: 'delete'
   })
 }
+
+export function getSaleCodeDict() {
+  return request({
+    url: '/sale/sale/codeDict',
+    method: 'get'
+  })
+}

src/views/frozen/sale/index.vue

@@ -168,7 +168,7 @@
           </el-col>
         </el-row>
         <el-table :data="ddSaleItemList" :row-class-name="rowDdSaleItemIndex"
-          @selection-change="handleDdSaleItemSelectionChange" ref="ddSaleItem">
+          @selection-change="handleDdSaleItemSelectionChange" ref="ddSaleItem" align="center">
           <el-table-column type="selection" width="50" align="center" />
           <el-table-column label="序号" align="center" prop="index" width="50" />
           <el-table-column label="明细类型" prop="itemType" width="150">
@@ -179,36 +179,23 @@
               </el-select>
             </template>
           </el-table-column>
-          <el-table-column label="胚胎编号或冻精号" prop="itemCode" width="150">
+          <el-table-column label="胚胎编号或冻精号" prop="itemCode">
             <template #default="scope">
-              <el-input v-model="scope.row.itemCode" placeholder="请输入胚胎编号或冻精号" />
+              <el-select v-model="scope.row.itemCode" placeholder="请选择序号">
+                <el-option v-for="dict in getItemCodeOptions(scope.row)" :value="dict"></el-option>
+              </el-select>
             </template>
           </el-table-column>
-          <el-table-column label="数量" prop="qty" width="150">
+          <!-- <el-table-column label="数量" prop="qty" width="150">
             <template #default="scope">
               <el-input v-model="scope.row.qty" placeholder="请输入数量" />
             </template>
-          </el-table-column>
+          </el-table-column> -->
           <el-table-column label="单价" prop="unitPrice" width="150">
             <template #default="scope">
               <el-input v-model="scope.row.unitPrice" placeholder="请输入单价" />
             </template>
           </el-table-column>
-          <el-table-column label="所在液氮罐ID" prop="tankId" width="150">
-            <template #default="scope">
-              <el-input v-model="scope.row.tankId" placeholder="请输入所在液氮罐ID" />
-            </template>
-          </el-table-column>
-          <el-table-column label="所在提桶ID" prop="bucketId" width="150">
-            <template #default="scope">
-              <el-input v-model="scope.row.bucketId" placeholder="请输入所在提桶ID" />
-            </template>
-          </el-table-column>
-          <el-table-column label="所在冷冻架ID" prop="rackId" width="180">
-            <template #default="scope">
-              <el-input v-model="scope.row.rackId" placeholder="请输入所在冷冻架ID" />
-            </template>
-          </el-table-column>
         </el-table>
       </el-form>
       <template #footer>
@@ -223,7 +210,7 @@
       <el-table :data="ddSaleItemList" :row-class-name="rowDdSaleItemIndex"
         @selection-change="handleDdSaleItemSelectionChange" ref="ddSaleItem">
         <el-table-column type="selection" width="50" align="center" disabled />
-        <el-table-column label="序号" align="center" prop="index" width="50" />
+        <el-table-column label="序号" align="center" prop="index" width="50" disabled />
         <el-table-column label="明细类型" prop="itemType" width="150">
           <template #default="scope">
             <el-select v-model="scope.row.itemType" placeholder="请选择明细类型" disabled>
@@ -232,8 +219,14 @@
             </el-select>
           </template>
         </el-table-column>
-        <el-table-column label="胚胎编号或冻精号" prop="itemCode" width="150" align="center" />
-        <el-table-column label="数量" prop="qty" width="150" align="center" />
+        <el-table-column label="胚胎编号或冻精号" prop="itemCode" width="200" align="center">
+          <template #default="scope">
+            <el-select v-model="scope.row.itemCode" placeholder="请选择序号" disabled>
+              <el-option v-for="dict in getItemCodeOptions(scope.row)" :value="dict"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="数量" prop="qty" width="100" align="center" />
 
         <el-table-column label="单价" prop="unitPrice" width="150" align="center" />
         <el-table-column label="所在液氮罐ID" prop="tankId" width="150" align="center" />
@@ -246,7 +239,10 @@
 
 <script setup name="Sale">
   import { listSale, getSale, delSale, addSale, updateSale } from "@/api/frozen/sale"
-  import { tr } from "date-fns/locale"
+  import { reactive } from "vue"
+  import { ref } from "vue"
+  import { getSaleCodeDict } from "../../../api/frozen/sale"
+  import { computed } from "vue"
 
   const { proxy } = getCurrentInstance()
   const { frozen_sale_item_type } = proxy.useDict('frozen_sale_item_type')
@@ -263,7 +259,7 @@
   const multiple = ref(true)
   const total = ref(0)
   const title = ref("")
-
+  const CodeDict = reactive({})
   const data = reactive({
     form: {},
     queryParams: {
@@ -297,9 +293,22 @@
 
   const { queryParams, form, rules } = toRefs(data)
 
+  function getItemCodeOptions(row) {
+    if (row.itemType === "embryo") {
+      return this.CodeDict.embryo || []
+    }
+    if (row.itemType === "semen") {
+      return this.CodeDict.semen || []
+    }
+    return []
+  }
   /** 查询销售主单列表 */
   function getList() {
     loading.value = true
+    getSaleCodeDict().then(response => {
+      Object.assign(CodeDict, response.data)
+    })
+    console.log(CodeDict)
     listSale(queryParams.value).then(response => {
       saleList.value = response.rows
       total.value = response.total
@@ -364,6 +373,10 @@
   function handleUpdateOrView(row, mode) {
     reset()
     const _id = row.id || ids.value
+    // 获取字典数据
+    getSaleCodeDict().then(response => {
+      Object.assign(CodeDict, response.data)
+    })
     getSale(_id).then(response => {
       form.value = response.data
       ddSaleItemList.value = response.data.ddSaleItemList
@@ -451,6 +464,5 @@
       ...queryParams.value
     }, `sale_${new Date().getTime()}.xlsx`)
   }
-
   getList()
 </script>