Jelajahi Sumber

refactor(storage): 采购收货审批替换原生el-table为ele-pro-table优化表格渲染

liujt 1 bulan lalu
induk
melakukan
6093af55c0
1 mengubah file dengan 410 tambahan dan 584 penghapusan
  1. 410 584
      src/views/bpm/stockManagement/storage.vue

+ 410 - 584
src/views/bpm/stockManagement/storage.vue

@@ -144,270 +144,174 @@
             :model="{ productList: productList }"
             :show-message="false"
           >
-            <el-button
-              v-if="productList.length != 0"
-              type="success"
-              plain
-              style="margin-bottom: 20px; float: right; margin-right: 20px"
-              size="mini"
-              @click="listSaveArrs"
-              >批量保存</el-button
-            >
-            <el-button
-              v-if="productList.length != 0 && this.packingList.length == 0"
-              type="success"
-              plain
-              style="margin-bottom: 20px; float: right; margin-right: 20px"
-              size="mini"
-              @click="handleWareHouse(productList, '', 'batch')"
-              >批量选择仓库</el-button
-            >
-            <el-table
+            <div style="text-align: right;margin-bottom: 10px;">
+              <el-button
+                v-if="productList.length != 0"
+                type="success"
+                plain
+                size="mini"
+                @click="listSaveArrs"
+                >批量保存</el-button
+              >
+              <el-button
+                v-if="productList.length != 0 && this.packingList.length == 0"
+                type="success"
+                plain
+                size="mini"
+                @click="handleWareHouse(productList, '', 'batch')"
+                >批量选择仓库</el-button
+              >
+            </div>
+            <ele-pro-table
+              ref="productListTable"
+              :needPage="false"
+              :columns="columns"
+              :datasource="productList"
               :header-cell-style="rowClass"
               :max-height="300"
-              border
-              ref="productListTable"
-              :data="productList"
-              tooltip-effect="dark"
             >
-              <el-table-column
-                label="序号"
-                type="index"
-                width="50"
-                align="center"
-                fixed="left"
-              >
-              </el-table-column>
-              <el-table-column
-                label="编码"
-                prop="categoryCode"
-                align="center"
-                width="130"
-                :show-overflow-tooltip="true"
-                fixed="left"
-              ></el-table-column>
-              <el-table-column
-                label="名称"
-                align="center"
-                width="200"
-                prop="categoryName"
-                :show-overflow-tooltip="true"
-                fixed="left"
-              ></el-table-column>
-              <el-table-column
-                label="牌号"
-                align="center"
-                width="100"
-                prop="brandNum"
-                :show-overflow-tooltip="true"
-              ></el-table-column>
-              <el-table-column
-                label="型号"
-                align="center"
-                width="100"
-                prop="categoryModel"
-                :show-overflow-tooltip="true"
-              ></el-table-column>
-              <el-table-column
-                label="规格"
-                align="center"
-                width="100"
-                prop="specification"
-                :show-overflow-tooltip="true"
-              ></el-table-column>
-              <el-table-column
-                v-for="(item, index) in newColumns"
-                :label="item.label"
-                :align="item.align"
-                :prop="item.prop"
-                :show-overflow-tooltip="item.showOverflowTooltip"
-              ></el-table-column>
-
-              <el-table-column
-                label="包装完好与否"
-                align="center"
-                width="100"
-                prop="ifPackageOk"
-                v-if="isShowPackage"
-              >
-                <template slot-scope="{ row, $index }">
-                  <!-- <template v-if="row.isSave">
-                    {{ row.ifPackageOk == 1 ? '是' : row.ifPackageOk == 0 ? '否' : '' }}
-                  </template> -->
-                  <el-form-item
-                    :prop="`productList.${$index}.ifPackageOk`"
-                    required
+              <!-- 包装完好与否 -->
+              <template v-slot:ifPackageOk="{ row, $index }" v-if="isShowPackage">
+                <el-form-item
+                  :prop="'productList.' + $index + '.ifPackageOk'"
+                  :rules="{
+                    required: true,
+                    message: '请选择包装完好与否',
+                    trigger: 'change'
+                  }"
+                >
+                  <el-select
+                    v-model="row.ifPackageOk"
+                    placeholder="请选择"
+                    clearable
+                    style="width: 100%"
                   >
-                    <el-select
-                      v-model="row.ifPackageOk"
-                      placeholder="请选择"
-                      clearable
-                      style="width: 100%"
-                    >
-                      <el-option label="是" :value="1" />
-                      <el-option label="否" :value="0" />
-                    </el-select>
-                  </el-form-item>
+                    <el-option label="是" :value="1" />
+                    <el-option label="否" :value="0" />
+                  </el-select>
+                </el-form-item>
+              </template>
+
+              <!-- 拆包装责任人 -->
+              <template v-slot:unpackUserName="{ row, $index }" v-if="isShowPackage">
+                <el-form-item
+                  :prop="'productList.' + $index + '.unpackUserName'"
+                  :rules="{
+                    required: true,
+                    message: '请选择拆包装责任人',
+                    trigger: 'change'
+                  }"
+                >
+                  <el-input
+                    @click.native="handHead(row, $index)"
+                    v-model="row.unpackUserName"
+                    placeholder="请选择"
+                  ></el-input>
+                </el-form-item>
+              </template>
+
+              <!-- 批次号 -->
+              <template v-slot:batchNo="{ row, $index }">
+                <template v-if="row.isSave">
+                  {{ row.batchNo }}
                 </template>
-              </el-table-column>
-              <el-table-column
-                label="拆包装责任人"
-                align="center"
-                width="100"
-                prop="unpackUserName"
-                v-if="isShowPackage"
-              >
-                <template slot-scope="{ row, $index }">
-                  <!-- <template v-if="row.isSave">
-                    {{ row.unpackUserName }}
-                  </template> -->
-                  <el-form-item
-                    :prop="`productList.${$index}.unpackUserName`"
-                    required
+                <el-form-item
+                  v-else
+                  :prop="'productList.' + $index + '.batchNo'"
+                  :rules="{
+                    required: true,
+                    message: '请输入批次号',
+                    trigger: 'blur'
+                  }"
+                >
+                  <el-input
+                    :ref="'batchNo' + $index"
+                    @keyup.native="
+                      moveFocus($event, $index, 'batchNo', '产品', row)
+                    "
+                    v-model.number="row.batchNo"
                   >
-                    <el-input
-                      @click.native="handHead(row, $index)"
-                      v-model="row.unpackUserName"
-                      placeholder="请选择"
-                    ></el-input>
-                  </el-form-item>
-                </template>
-              </el-table-column>
+                  </el-input>
+                </el-form-item>
+              </template>
 
-              <el-table-column
-                label="批次号"
-                align="center"
-                width="100"
-                prop="batchNo"
-              >
-                <template slot-scope="{ row, $index }">
-                  <template v-if="row.isSave">
-                    {{ row.batchNo }}
-                  </template>
-                  <el-form-item
-                    v-else
-                    :prop="`productList.${$index}.batchNo`"
-                    required
-                  >
-                    <el-input
-                      :ref="'batchNo' + $index"
-                      @keyup.native="
-                        moveFocus($event, $index, 'batchNo', '产品', row)
-                      "
-                      v-model.number="row.batchNo"
-                    >
-                    </el-input>
-                  </el-form-item>
+              <!-- 数量 -->
+              <template v-slot:packingQuantity="{ row, $index }">
+                <template v-if="row.isSave">
+                  {{ row.packingQuantity }}
                 </template>
-              </el-table-column>
-              <el-table-column
-                label="数量"
-                align="center"
-                width="100"
-                prop="packingQuantity"
-              >
-                <template slot-scope="{ row, $index }">
-                  <template v-if="row.isSave">
-                    {{ row.packingQuantity }}
-                  </template>
-                  <el-form-item
-                    v-else
-                    :prop="`productList.${$index}.packingQuantity`"
-                    required
+                <el-form-item
+                  v-else
+                  :prop="'productList.' + $index + '.packingQuantity'"
+                  :rules="{
+                    required: true,
+                    message: '请输入数量',
+                    trigger: 'blur'
+                  }"
+                >
+                  <el-input
+                    :ref="'packingQuantity' + $index"
+                    type="number"
+                    @keyup.native="
+                      moveFocus(
+                        $event,
+                        $index,
+                        'packingQuantity',
+                        '产品',
+                        row
+                      )
+                    "
+                    v-model="row.packingQuantity"
+                    @input="computeNum(row, $index, true)"
                   >
-                    <el-input
-                      :ref="'packingQuantity' + $index"
-                      type="number"
-                      @keyup.native="
-                        moveFocus(
-                          $event,
-                          $index,
-                          'packingQuantity',
-                          '产品',
-                          row
-                        )
-                      "
-                      v-model="row.packingQuantity"
-                      @input="computeNum(row, $index, true)"
-                    >
-                    </el-input>
-                  </el-form-item>
+                  </el-input>
+                </el-form-item>
+              </template>
+
+              <!-- 单位 -->
+              <template v-slot:packingUnit="{ row, $index }">
+                <template v-if="row.isSave">
+                  {{ row.packingUnit }}
                 </template>
-              </el-table-column>
-              <el-table-column
-                label="单位"
-                align="center"
-                prop="packingUnit"
-                width="100"
-              >
-                <template slot-scope="{ row, $index }">
-                  <template v-if="row.isSave">
-                    {{ row.packingUnit }}
-                  </template>
-                  <el-form-item
-                    v-else
-                    :prop="`productList.${$index}.packingUnit`"
-                    required
+                <el-form-item
+                  v-else
+                  :prop="'productList.' + $index + '.packingUnit'"
+                  :rules="{
+                    required: true,
+                    message: '请选择单位',
+                    trigger: 'change'
+                  }"
+                >
+                  <el-select
+                    v-model="row.packingUnitId"
+                    placeholder="请选择"
+                    @change="computeNum(row, $index)"
                   >
-                    <el-select
-                      v-model="row.packingUnitId"
-                      placeholder="请选择"
-                      @change="computeNum(row, $index)"
+                    <el-option
+                      v-for="item in row.packingSpecificationOption"
+                      :label="`${item.conversionUnit}`"
+                      :value="item.id"
+                      :key="item.id"
                     >
-                      <el-option
-                        v-for="item in row.packingSpecificationOption"
-                        :label="`${item.conversionUnit}`"
-                        :value="item.id"
-                        :key="item.id"
-                      >
-                      </el-option>
-                    </el-select>
-                  </el-form-item>
-                </template>
-              </el-table-column>
-              <el-table-column
-                label="包装规格"
-                align="center"
-                prop="packingSpecificationLabel"
-                width="300"
-                :show-overflow-tooltip="true"
-              >
-                <template slot-scope="{ row, $index }">
-                  <el-tag v-for="item in row.packingSpecificationLabel">{{
-                    item
-                  }}</el-tag>
-                </template>
-              </el-table-column>
-              <el-table-column label="允许拆包" prop="isUnpack">
-                <template slot-scope="{ row, $index }">
-                  {{ row.isUnpack == 1 ? '是' : '否' }}
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </template>
+
+              <!-- 包装规格 -->
+              <template v-slot:packingSpecificationLabel="{ row, $index }">
+                <el-tag v-for="item in row.packingSpecificationLabel">{{
+                  item
+                }}</el-tag>
+              </template>
+
+              <!-- 单重 -->
+              <template v-slot:singleWeight="{ row, $index }">
+                <template v-if="row.isSave">
+                  {{ row.singleWeight }}
                 </template>
-              </el-table-column>
-              <el-table-column
-                label="计量数量"
-                align="center"
-                prop="measureQuantity"
-                :show-overflow-tooltip="true"
-              ></el-table-column>
-              <el-table-column
-                label="计量单位"
-                align="center"
-                prop="measureUnit"
-                :show-overflow-tooltip="true"
-              ></el-table-column>
-              <el-table-column
-                label="单重"
-                align="center"
-                prop="singleWeight"
-                :show-overflow-tooltip="true"
-                width="120"
-              >
-                <template slot-scope="{ row, $index }">
-                  <template v-if="row.isSave">
-                    {{ row.singleWeight }}
-                  </template>
+                <template v-else>
                   <el-input-number
-                    v-else
                     v-model="row.singleWeight"
                     placeholder="请输入"
                     :min="0"
@@ -417,349 +321,167 @@
                     :controls="false"
                     style="width: 100%"
                   ></el-input-number>
-                  <template slot="append">
-                    {{ row.measureUnit }}
-                  </template>
-                </template>
-              </el-table-column>
-              <!-- <el-table-column
-                label="计价方式"
-                align="center"
-                prop="pricingWay"
-                :show-overflow-tooltip="true"
-                width="120"
-              >
-                <template slot-scope="{ row, $index }">
-                  <span v-if="row.pricingWay == 1">数量</span>
-                  <span v-if="row.pricingWay == 2">重量</span>
                 </template>
-              </el-table-column> -->
+              </template>
 
-              <el-table-column
-                label="总重"
-                align="center"
-                prop="weight"
-                width="120"
-                :show-overflow-tooltip="true"
-              >
-                <template slot-scope="{ row, $index }">
-                  <template v-if="row.isSave">
-                    {{ row.weight }}
-                  </template>
-                  <el-input
-                    v-else
-                    v-model="row.weight"
-                    placeholder="请输入"
-                    type="number"
-                    @input="inputWeight(row, $index)"
-                    :disabled="row.weightUnit == row.packingUnit"
-                  ></el-input>
-                  <template slot="append">
-                    {{ row.measureUnit }}
-                  </template>
-                </template>
-              </el-table-column>
-              <el-table-column
-                label="重量单位"
-                align="center"
-                prop="weightUnit"
-                :show-overflow-tooltip="true"
-              >
-                <template slot-scope="{ row, $index }">
-                  {{ row.weightUnit }}
-                  <template slot="append"> </template>
-                </template>
-              </el-table-column>
-              <el-table-column
-                label="生产要求"
-                align="center"
-                width="200"
-                prop="productionRequirements"
-                :show-overflow-tooltip="true"
-              ></el-table-column>
-              <el-table-column label="机型" prop="modelKey" width="300">
-                <template slot-scope="{ row, $index }">
-                  <DictSelection
-                    dictName="物品机型"
-                    clearable
-                    v-model="row.modelKey"
-                    :isOne="$index == 1"
-                    multiple
-                    filterable
-                    allow-create
-                    default-first-option
-                  >
-                  </DictSelection>
-                </template>
-              </el-table-column>
-              <el-table-column label="颜色" prop="colorKey" width="300">
-                <template slot-scope="{ row, $index }">
-                  <DictSelection
-                    dictName="物品颜色"
-                    clearable
-                    v-model="row.colorKey"
-                    :isOne="$index == 1"
-                    multiple
-                    filterable
-                    allow-create
-                    default-first-option
-                  >
-                  </DictSelection>
-                </template>
-              </el-table-column>
-              <!-- <el-table-column label="单价" prop="unitPrice" width="200" align="center">
-                <template slot-scope="{ row, $index }">
-                  <template v-if="row.isSave">
-                    <span>{{ row.unitPrice }}</span>
-                    <span v-if="row.unitPrice">/元</span>
-                  </template>
-                  <el-form-item v-else>
-                    <el-input type="number" :ref="'unitPrice' + $index" @keyup.native="
-                      moveFocus($event, $index, 'unitPrice', '产品', row)
-                      " v-model.number="row.unitPrice" placeholder="非必填" @input="
-                        (value) =>
-                          (row.unitPrice = value.replace(/[^0-9.]+/g, ''))
-                      ">
-                      <template slot="append">
-                        <span v-if="row.unitPrice">/元</span>
-                      </template>
-                    </el-input>
-                  </el-form-item>
-                </template>
-              </el-table-column> -->
-              <!-- <el-table-column label="金额" align="center" prop="totalMoney" :show-overflow-tooltip="true">
-                <template slot-scope="{ row, $index }">
-                  {{
-                    changeCount(
-                      calcSumTotal(row.measureQuantity, row.unitPrice, row)
-                    )
-                  }}
-                </template>
-              </el-table-column> -->
-              <el-table-column
-                label="供应商"
-                align="center"
-                prop="supplierId"
-                width="200"
-                :show-overflow-tooltip="true"
-              >
-                <template slot-scope="{ row, $index }">
-                  <template v-if="row.isSave || row.supplierId">
-                    {{ row.supplierName }}
-                  </template>
-                  <el-select
-                    v-else
-                    @change="selectSupplier($event, row)"
-                    v-model="row.supplierId"
-                    placeholder="请选择"
-                    :clearable="true"
-                  >
-                    <el-option
-                      v-for="item in row.supplierListOptions"
-                      :label="item.name"
-                      :value="item.id"
-                      :key="item.id"
-                    >
-                    </el-option>
-                  </el-select>
-                </template>
-              </el-table-column>
-              <el-table-column
-                label="供应商代号"
-                align="center"
-                prop="supplierCode"
-                width="120"
-                :show-overflow-tooltip="true"
-              >
-                <template slot-scope="{ row, $index }">
-                  {{ row.supplierCode }}
-                </template>
-              </el-table-column>
-              <!-- <el-table-column v-else-if="bizType == 2" label="供应商代号" align="center" prop="supplierMark" width="120"
-                :show-overflow-tooltip="true">
-                <template slot-scope="{ row, $index }">
-                  {{ row.supplierMark }}
-                </template>
-              </el-table-column> -->
-              <el-table-column
-                label="产地"
-                align="center"
-                prop="provenance"
-                v-if="bizType == 2"
-                :show-overflow-tooltip="true"
-                width="120"
-              >
-                <template slot-scope="{ row, $index }">
-                  {{
-                    row.provenance &&
-                    row.provenance
-                      .map((item) => getDictValue('产地', item))
-                      .join(',')
-                  }}
+              <!-- 总重 -->
+              <template v-slot:weight="{ row, $index }">
+                <template v-if="row.isSave">
+                  {{ row.weight }}
                 </template>
-              </el-table-column>
-              <el-table-column
-                label="仓库"
-                align="center"
-                prop="warehouseName"
-                :show-overflow-tooltip="true"
-                width="300"
-              >
-                <template slot-scope="{ row, $index }">
-                  <el-form-item
-                    :prop="`productList.${$index}.warehouseId`"
-                    required
-                  >
-                    <div
-                      :class="
-                        row.warehouseName
-                          ? 'wareHouse_style'
-                          : 'wareHouse_style red_color'
-                      "
-                      @click="handleWareHouse(row, $index)"
-                    >
-                      <span>
-                        {{
-                          row.warehouseName ? row.warehouseName : '请选择仓库'
-                        }}
-                      </span>
-                    </div>
-                  </el-form-item>
-                </template>
-              </el-table-column>
-              <el-table-column
-                label="采购原因"
-                align="center"
-                width="200"
-                prop="purpose"
-                :show-overflow-tooltip="true"
-              >
-                <template slot-scope="{ row, $index }">
-                  <template v-if="row.isSave">
-                    {{ row.purpose }}
-                  </template>
-                  <el-input
-                    v-else
-                    :ref="'purpose' + $index"
-                    @keyup.native="
-                      moveFocus($event, $index, 'purpose', '产品', row)
+                <el-input
+                  v-else
+                  v-model="row.weight"
+                  placeholder="请输入"
+                  type="number"
+                  @input="inputWeight(row, $index)"
+                  :disabled="row.weightUnit == row.packingUnit"
+                ></el-input>
+              </template>
+
+              <!-- 仓库 -->
+              <template v-slot:warehouseName="{ row, $index }">
+                <el-form-item
+                  :prop="'productList.' + $index + '.warehouseId'"
+                  :rules="{
+                    required: true,
+                    message: '请选择仓库',
+                    trigger: 'change'
+                  }"
+                >
+                  <div
+                    :class="
+                      row.warehouseName
+                        ? 'wareHouse_style'
+                        : 'wareHouse_style red_color'
                     "
-                    v-model="row.purpose"
+                    @click="handleWareHouse(row, $index)"
                   >
-                  </el-input>
+                    <span>
+                      {{
+                        row.warehouseName ? row.warehouseName : '请选择仓库'
+                      }}
+                    </span>
+                  </div>
+                </el-form-item>
+              </template>
+
+              <!-- 采购原因 -->
+              <template v-slot:purpose="{ row, $index }">
+                <template v-if="row.isSave">
+                  {{ row.purpose }}
                 </template>
-              </el-table-column>
-              <el-table-column
-                label="是否质检"
-                align="center"
-                width="80"
-                prop="qualityControl"
-                :show-overflow-tooltip="true"
-                v-if="bizType != 1 && bizType != 6 && bizType != 9"
-              >
-                <template slot-scope="{ row, $index }">
-                  {{
-                    row.qualityControl == 1
-                      ? '是'
-                      : row.qualityControl == 0
-                      ? '否'
-                      : ''
-                  }}
+                <el-input
+                  v-else
+                  :ref="'purpose' + $index"
+                  @keyup.native="
+                    moveFocus($event, $index, 'purpose', '产品', row)
+                  "
+                  v-model="row.purpose"
+                >
+                </el-input>
+              </template>
+
+              <!-- 生产日期 -->
+              <template v-slot:detailProductionDate="{ row, $index }">
+                <template v-if="row.isSave">
+                  {{ row.detailProductionDate }}
                 </template>
-              </el-table-column>
-              <el-table-column
-                align="center"
-                label="生产日期"
-                prop="detailProductionDate"
-                width="220"
-              >
-                <template slot-scope="{ row, $index }">
-                  <template v-if="row.isSave">
-                    {{ row.detailProductionDate }}
-                  </template>
-                  <el-date-picker
-                    v-else
-                    :disabled="row.isPack"
-                    size="small"
-                    v-model="row.detailProductionDate"
-                    type="datetime"
-                    value-format="yyyy-MM-dd HH:mm:ss"
-                    placeholder="选择日期"
-                  >
-                  </el-date-picker
-                ></template>
-              </el-table-column>
+                <el-date-picker
+                  v-else
+                  :disabled="row.isPack"
+                  size="small"
+                  v-model="row.detailProductionDate"
+                  type="datetime"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  placeholder="选择日期"
+                >
+                </el-date-picker>
+              </template>
 
-              <el-table-column
-                align="center"
-                label="采购日期"
-                prop="detailPurchaseDate"
-                width="220"
-              >
-                <template slot-scope="{ row, $index }">
-                  <template v-if="row.isSave">
-                    {{ row.detailPurchaseDate }}
-                  </template>
-                  <el-date-picker
-                    v-else
-                    :disabled="row.isPack"
-                    size="small"
-                    v-model="row.detailPurchaseDate"
-                    type="datetime"
-                    value-format="yyyy-MM-dd HH:mm:ss"
-                    placeholder="选择日期"
-                  >
-                  </el-date-picker
-                ></template>
-              </el-table-column>
-              <el-table-column
-                align="center"
-                label="失效日期"
-                prop="detailExpireDate"
-                width="220"
-              >
-                <template slot-scope="{ row, $index }">
-                  <template v-if="row.isSave">
-                    {{ row.detailExpireDate }}
-                  </template>
-                  <el-date-picker
-                    v-else
-                    :disabled="row.isPack"
-                    size="small"
-                    v-model="row.detailExpireDate"
-                    type="datetime"
-                    value-format="yyyy-MM-dd HH:mm:ss"
-                    placeholder="选择日期"
-                  >
-                  </el-date-picker
-                ></template>
-              </el-table-column>
-              <el-table-column
-                label="操作"
-                width="200"
-                fixed="right"
-                align="center"
-              >
-                <template slot="header" slot-scope="scope"> 操作 </template>
-                <template slot-scope="{ row, $index }">
-                  <el-button
-                    type="text"
-                    v-show="!row.isSave"
-                    @click="listSave(row, $index)"
-                    >保存</el-button
-                  >
-                  <el-button
-                    type="text"
-                    v-show="row.isSave"
-                    @click="listEdit(row, $index)"
-                    >编辑</el-button
-                  >
-                  <el-button type="text" @click="listDel(row, $index)"
-                    >删除</el-button
-                  >
+              <!-- 采购日期 -->
+              <template v-slot:detailPurchaseDate="{ row, $index }">
+                <template v-if="row.isSave">
+                  {{ row.detailPurchaseDate }}
+                </template>
+                <el-date-picker
+                  v-else
+                  :disabled="row.isPack"
+                  size="small"
+                  v-model="row.detailPurchaseDate"
+                  type="datetime"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  placeholder="选择日期"
+                >
+                </el-date-picker>
+              </template>
+
+              <!-- 失效日期 -->
+              <template v-slot:detailExpireDate="{ row, $index }">
+                <template v-if="row.isSave">
+                  {{ row.detailExpireDate }}
                 </template>
-              </el-table-column>
-            </el-table>
+                <el-date-picker
+                  v-else
+                  :disabled="row.isPack"
+                  size="small"
+                  v-model="row.detailExpireDate"
+                  type="datetime"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  placeholder="选择日期"
+                >
+                </el-date-picker>
+              </template>
+
+              <!-- 颜色 -->
+              <template v-slot:colorKey="{ row, $index }">
+                <DictSelection
+                  dictName="物品颜色"
+                  clearable
+                  v-model="row.colorKey"
+                  :isOne="$index == 1"
+                  multiple
+                  filterable
+                  allow-create
+                  default-first-option
+                >
+                </DictSelection>
+              </template>
+
+              <!-- 机型 -->
+              <template v-slot:modelKey="{ row, $index }">
+                <DictSelection
+                  dictName="物品机型"
+                  clearable
+                  v-model="row.modelKey"
+                  :isOne="$index == 1"
+                  multiple
+                  filterable
+                  allow-create
+                  default-first-option
+                >
+                </DictSelection>
+              </template>
+
+              <!-- 操作 -->
+              <template v-slot:action="{ row, $index }">
+                <el-button
+                  type="text"
+                  v-show="!row.isSave"
+                  @click="listSave(row, $index)"
+                  >保存</el-button
+                >
+                <el-button
+                  type="text"
+                  v-show="row.isSave"
+                  @click="listEdit(row, $index)"
+                  >编辑</el-button
+                >
+                <el-button type="text" @click="listDel(row, $index)"
+                  >删除</el-button
+                >
+              </template>
+            </ele-pro-table>
           </el-form>
         </div>
       </div>
@@ -1342,6 +1064,110 @@
       ...mapGetters(['dict', 'getDict', 'getDictValue']),
       clientEnvironmentId() {
         return this.$store.state.user.info.clientEnvironmentId;
+      },
+      columns() {
+        return [
+          { width: 50, type: 'index', columnKey: 'index', align: 'center', fixed: 'left' },
+          { label: '编码', prop: 'categoryCode', align: 'center', width: 130, showOverflowTooltip: true, fixed: 'left' },
+          { label: '名称', prop: 'categoryName', align: 'center', width: 200, showOverflowTooltip: true, fixed: 'left' },
+          { label: '牌号', prop: 'brandNum', align: 'center', width: 100, showOverflowTooltip: true },
+          { label: '型号', prop: 'categoryModel', align: 'center', width: 100, showOverflowTooltip: true },
+          { label: '规格', prop: 'specification', align: 'center', width: 100, showOverflowTooltip: true },
+          ...this.newColumns.map(item => ({
+            ...item,
+            prop: item.prop,
+            showOverflowTooltip: true
+          })),
+          // 包装完好与否
+          {
+            label: '包装完好与否',
+            prop: 'ifPackageOk',
+            slot: 'ifPackageOk',
+            align: 'center',
+            width: 100,
+            show: this.isShowPackage
+          },
+          // 拆包装责任人
+          {
+            label: '拆包装责任人',
+            prop: 'unpackUserName',
+            slot: 'unpackUserName',
+            align: 'center',
+            width: 100,
+            show: this.isShowPackage
+          },
+          // 批次号
+          { label: '批次号', prop: 'batchNo', slot: 'batchNo', align: 'center', width: 100 },
+          // 数量
+          { label: '数量', prop: 'packingQuantity', slot: 'packingQuantity', align: 'center', width: 100 },
+          // 单位
+          { label: '单位', prop: 'packingUnit', slot: 'packingUnit', align: 'center', width: 100 },
+          // 包装规格
+          { label: '包装规格', prop: 'packingSpecificationLabel', slot: 'packingSpecificationLabel', align: 'center', width: 300, showOverflowTooltip: true },
+          // 允许拆包
+          { label: '允许拆包', prop: 'isUnpack', align: 'center', width: 80, formatter: (row) => row.isUnpack == 1 ? '是' : '否' },
+          // 计量数量
+          { label: '计量数量', prop: 'measureQuantity', align: 'center', width: 100, showOverflowTooltip: true },
+          // 计量单位
+          { label: '计量单位', prop: 'measureUnit', align: 'center', width: 80, showOverflowTooltip: true },
+          // 单重
+          { label: '单重', prop: 'singleWeight', slot: 'singleWeight', align: 'center', width: 120, showOverflowTooltip: true },
+          // 总重
+          { label: '总重', prop: 'weight', slot: 'weight', align: 'center', width: 120, showOverflowTooltip: true },
+          // 重量单位
+          { label: '重量单位', prop: 'weightUnit', align: 'center', width: 80, showOverflowTooltip: true },
+          // 生产要求
+          { label: '生产要求', prop: 'productionRequirements', align: 'center', width: 200, showOverflowTooltip: true },
+          // 机型
+          { label: '机型', prop: 'modelKey', slot: 'modelKey', align: 'center', width: 300 },
+          // 颜色
+          { label: '颜色', prop: 'colorKey', slot: 'colorKey', align: 'center', width: 300 },
+          // 供应商
+          { label: '供应商', prop: 'supplierId', align: 'center', width: 200, showOverflowTooltip: true },
+          // 供应商代号
+          { label: '供应商代号', prop: 'supplierCode', align: 'center', width: 120, showOverflowTooltip: true },
+          // 产地
+          {
+            label: '产地',
+            prop: 'provenance',
+            align: 'center',
+            width: 120,
+            showOverflowTooltip: true,
+            show: this.bizType == 2,
+            formatter: (row) => {
+              if (row.provenance) {
+                return row.provenance.map((item) => this.getDictValue('产地', item)).join(',');
+              }
+              return '';
+            }
+          },
+          // 仓库
+          { label: '仓库', prop: 'warehouseName', slot: 'warehouseName', align: 'center', width: 300, showOverflowTooltip: true },
+          // 采购原因
+          { label: '采购原因', prop: 'purpose', slot: 'purpose', align: 'center', width: 200, showOverflowTooltip: true },
+          // 是否质检
+          {
+            label: '是否质检',
+            prop: 'qualityControl',
+            align: 'center',
+            width: 80,
+            showOverflowTooltip: true,
+            show: this.bizType != 1 && this.bizType != 6 && this.bizType != 9,
+            formatter: (row) => {
+              if (row.qualityControl == 1) return '是';
+              if (row.qualityControl == 0) return '否';
+              return '';
+            }
+          },
+          // 生产日期
+          { label: '生产日期', prop: 'detailProductionDate', slot: 'detailProductionDate', align: 'center', width: 220 },
+          // 采购日期
+          { label: '采购日期', prop: 'detailPurchaseDate', slot: 'detailPurchaseDate', align: 'center', width: 220 },
+          // 失效日期
+          { label: '失效日期', prop: 'detailExpireDate', slot: 'detailExpireDate', align: 'center', width: 220 },
+          // 操作
+          { label: '操作', columnKey: 'action', slot: 'action', width: 140, align: 'center', fixed: 'right' }
+        ].filter(col => col.show !== false);
       }
     },
     watch: {