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

@@ -86,89 +86,116 @@
 
     <!-- 添加或修改销售主单对话框 -->
     <el-dialog :title="title" v-model="open" width="1200px" append-to-body>
-      <el-form ref="saleRef" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="saleRef" :model="form" :rules="rules" label-width="100px">
+
+        <!-- ================= 主单信息（两列布局） ================= -->
+        <el-row :gutter="20">
+          <el-col :span="12">
             <el-form-item label="销售日期" prop="saleDate">
-          <el-date-picker clearable v-model="form.saleDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择销售日期">
-          </el-date-picker>
+              <el-date-picker clearable v-model="form.saleDate" type="date" value-format="YYYY-MM-DD"
+                placeholder="请选择销售日期" style="width: 100%" />
             </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
             <el-form-item label="客户名称" prop="custName">
               <el-input v-model="form.custName" placeholder="请输入客户名称" />
             </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
             <el-form-item label="客户电话" prop="custPhone">
               <el-input v-model="form.custPhone" placeholder="请输入客户电话" />
             </el-form-item>
-        <el-form-item label="客户地址" prop="custAddr">
-          <el-input v-model="form.custAddr" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
             <el-form-item label="销售人员" prop="salesper">
               <el-input v-model="form.salesper" placeholder="请输入销售人员" />
             </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
             <el-form-item label="检疫证号" prop="quaranNo">
               <el-input v-model="form.quaranNo" placeholder="请输入检疫证号" />
             </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
             <el-form-item label="审批编号" prop="apprNo">
               <el-input v-model="form.apprNo" placeholder="请输入审批编号" />
             </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
             <el-form-item label="总价" prop="price">
               <el-input v-model="form.price" placeholder="请输入总价" />
             </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
             <el-form-item label="技术员" prop="tech">
               <el-input v-model="form.tech" placeholder="请输入技术员" />
             </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          </el-col>
+
+          <!-- 占满一整行 -->
+          <el-col :span="24">
+            <el-form-item label="客户地址" prop="custAddr">
+              <el-input v-model="form.custAddr" type="textarea" placeholder="请输入客户地址" />
             </el-form-item>
+          </el-col>
+
+          <el-col :span="24">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- ================= 销售明细 ================= -->
         <el-divider content-position="center">销售明细信息</el-divider>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" icon="Plus" @click="handleAddDdSaleItem">添加</el-button>
+            <el-button type="primary" icon="Plus" @click="handleAddDdSaleItem">
+              添加
+            </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" icon="Delete" @click="handleDeleteDdSaleItem">删除</el-button>
+            <el-button type="danger" icon="Delete" @click="handleDeleteDdSaleItem">
+              删除
+            </el-button>
           </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">
             <template #default="scope">
-              <el-select v-model="scope.row.itemType" placeholder="请选择明细类型">
+              <el-select v-model="scope.row.itemType" placeholder="请选择明细类型" style="width:100%">
                 <el-option v-for="dict in frozen_sale_item_type" :key="dict.value" :label="dict.label"
-                  :value="dict.value"></el-option>
+                  :value="dict.value" />
               </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>
@@ -183,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>
@@ -192,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" />
@@ -206,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')
@@ -223,7 +259,7 @@
   const multiple = ref(true)
   const total = ref(0)
   const title = ref("")
-
+  const CodeDict = reactive({})
   const data = reactive({
     form: {},
     queryParams: {
@@ -257,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
@@ -324,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
@@ -411,6 +464,5 @@
       ...queryParams.value
     }, `sale_${new Date().getTime()}.xlsx`)
   }
-
   getList()
 </script>