feat(inventory): 优化库存管理批量详情页面功能

云

6 天以前 fe6ba6220f32276f147a16c41e7a69c2a18e5012

 src/views/basicData/tankInfo/index.vue

@@ -18,6 +18,30 @@
                      prefix-icon="Search"
                      @change="handleQuery" />
          </el-form-item>
          <el-form-item label="是否启用：">
            <el-select v-model="searchForm.isEnabled"
                       placeholder="请选择"
                       clearable
                       style="width: 140px"
                       @change="handleQuery">
              <el-option label="启用"
                         :value="1" />
              <el-option label="未启用"
                         :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="用途：">
            <el-select v-model="searchForm.usageType"
                       placeholder="请选择"
                       clearable
                       style="width: 140px"
                       @change="handleQuery">
              <el-option label="租赁"
                         :value="1" />
              <el-option label="自用"
                         :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="handleQuery"> 搜索
@@ -61,9 +85,28 @@
        <el-table-column label="罐容"
                         prop="capacity"
                         min-width="120" />
        <el-table-column label="库存余量(m³)"
        <el-table-column label="库存余量"
                         prop="remaining"
                         min-width="140" />
        <el-table-column label="是否启用"
                         prop="isEnabled"
                         align="center"
                         width="100">
          <template #default="scope">
            <el-tag :type="scope.row.isEnabled === 1 ? 'success' : 'info'"
                    size="small">
              {{ scope.row.isEnabled === 1 ? "启用" : "未启用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="用途"
                         prop="usageType"
                         align="center"
                         width="90">
          <template #default="scope">
            {{ getUsageTypeText(scope.row.usageType) }}
          </template>
        </el-table-column>
        <el-table-column label="租客信息"
                         prop="tenantInfo"
                         min-width="160"
@@ -162,7 +205,7 @@
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="库存余量(m³)："
            <el-form-item label="库存余量："
                          prop="remaining">
              <el-input-number v-model="form.remaining"
                               :precision="2"
@@ -172,11 +215,48 @@
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用："
                          prop="isEnabled">
              <el-switch v-model="form.isEnabled"
                         :active-value="1"
                         :inactive-value="0"
                         active-text="启用"
                         inactive-text="未启用" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30"
                v-if="form.isEnabled === 1">
          <el-col :span="12">
            <el-form-item label="用途："
                          prop="usageType">
              <el-radio-group v-model="form.usageType">
                <el-radio :value="1">租赁</el-radio>
                <el-radio :value="2">自用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12"
                  v-if="form.usageType === 1">
            <el-form-item label="租客信息："
                          prop="tenantInfo">
              <el-input v-model="form.tenantInfo"
                        placeholder="请输入租客信息"
                        clearable />
                          prop="tenantInfo"
                          :rules="[
                {
                required: true,
                message: '租赁的储罐必须填写租客信息',
                trigger: 'blur',
              }
            ]">
              <el-select v-model="form.tenantInfo"
                         placeholder="请选择租客"
                         clearable
                         filterable
                         style="width: 100%">
                <el-option v-for="item in tenantSelectOptions"
                           :key="item.id"
                           :label="item.customerName"
                           :value="item.customerName" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
@@ -188,7 +268,7 @@
<script setup>
  import FormDialog from "@/components/Dialog/FormDialog.vue";
  import pagination from "@/components/PIMTable/Pagination.vue";
  import { ref, reactive, toRefs, getCurrentInstance } from "vue";
  import { ref, reactive, toRefs, watch, computed, getCurrentInstance } from "vue";
  import { Search } from "@element-plus/icons-vue";
  import { ElMessageBox } from "element-plus";
  import {
@@ -197,8 +277,10 @@
    updateTankInfo,
    delTankInfo,
  } from "@/api/basicData/tankInfo.js";
  import { listCustomer } from "@/api/basicData/customer.js";

  const { proxy } = getCurrentInstance();
  const { customer_type } = proxy.useDict("customer_type");
  const tableData = ref([]);
  const selectedRows = ref([]);
  const tableLoading = ref(false);
@@ -214,6 +296,8 @@
    searchForm: {
      tankNo: "",
      category: "",
      isEnabled: "",
      usageType: "",
    },
    form: {
      id: null,
@@ -222,6 +306,8 @@
      oilProduct: "",
      capacity: null,
      remaining: null,
      isEnabled: 1,
      usageType: null,
      tenantInfo: "",
    },
    rules: {
@@ -230,6 +316,51 @@
    },
  });
  const { searchForm, form, rules } = toRefs(data);

  // 用途文案：1 租赁 / 2 自用
  const getUsageTypeText = value => ({ 1: "租赁", 2: "自用" })[value] || "--";

  // 租客只能从「代储客户」分类里选；字典的 value 未必就是中文标签，按 label 反查真实取值
  const tenantOptions = ref([]);
  let loadedTenantType = null;
  const loadTenantOptions = () => {
    const hit = (customer_type.value || []).find(
      item => item.label === "代储客户"
    );
    const customerType = hit ? hit.value : "代储客户";
    if (customerType === loadedTenantType) return;
    loadedTenantType = customerType;
    listCustomer({ current: -1, size: -1, customerType }).then(res => {
      tenantOptions.value = res.data.records || [];
    });
  };
  // 字典异步到达后再拉一次；字典命中缓存时 immediate 这一次就够了
  watch(customer_type, loadTenantOptions, { immediate: true });

  // 历史数据是手工填的租客名，未必还在代储客户列表里，补一个临时选项保证回显
  const tenantSelectOptions = computed(() => {
    const list = tenantOptions.value;
    const current = form.value.tenantInfo;
    if (current && !list.some(item => item.customerName === current)) {
      return [...list, { id: `legacy-${current}`, customerName: current }];
    }
    return list;
  });

  // 未启用时用途与租客信息一律清空；选自用时租客信息自动清空（租赁才需要租客）
  watch(
    () => [form.value.isEnabled, form.value.usageType],
    () => {
      if (form.value.isEnabled !== 1) {
        form.value.usageType = null;
        form.value.tenantInfo = "";
        return;
      }
      if (form.value.usageType !== 1) {
        form.value.tenantInfo = "";
      }
    }
  );

  const getList = () => {
    tableLoading.value = true;
@@ -259,14 +390,49 @@
    selectedRows.value = selection;
  };

  const buildEmptyForm = () => ({
    id: null,
    tankNo: "",
    category: "",
    oilProduct: "",
    capacity: null,
    remaining: null,
    isEnabled: 1,
    usageType: null,
    tenantInfo: "",
  });

  const openForm = (type, row) => {
    operationType.value = type;
    form.value = {};
    // 先重置再赋值：resetFields 会把字段打回挂载时的初值，放后面会把刚填好的值清掉
    proxy.resetForm("formRef");
    form.value = buildEmptyForm();
    dialogFormVisible.value = true;
    if (type === "edit" && row) {
      const { id, tankNo, category, oilProduct, capacity, remaining, tenantInfo } = row;
      form.value = { id, tankNo, category, oilProduct, capacity, remaining, tenantInfo };
      const {
        id,
        tankNo,
        category,
        oilProduct,
        capacity,
        remaining,
        isEnabled,
        usageType,
        tenantInfo,
      } = row;
      form.value = {
        ...buildEmptyForm(),
        id,
        tankNo,
        category,
        oilProduct,
        capacity,
        remaining,
        // 历史数据没有该字段，缺失时按「启用」处理，避免保存时被误置为未启用
        isEnabled: isEnabled ?? 1,
        usageType: usageType ?? null,
        tenantInfo: tenantInfo ?? "",
      };
    }
  };