新疆-融邦 1. 委外管理：新增合作商档案、委外订单、往来台账三个页面及接口；合作商附件弹框支持直接上传/删除并即时保存。 2. 信托基金与代储台...

gaoluyang

6 天以前 11d7990309ddace2fa600cbeae58e3ab5ac368f9

 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"> 搜索
@@ -64,6 +88,25 @@
        <el-table-column label="库存余量(m³)"
                         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"
@@ -172,8 +215,38 @@
            </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">
                          prop="tenantInfo"
                          :rules="[
                {
                required: true,
                message: '租赁的储罐必须填写租客信息',
                trigger: 'blur',
              }
            ]">
              <el-input v-model="form.tenantInfo"
                        placeholder="请输入租客信息"
                        clearable />
@@ -188,7 +261,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, getCurrentInstance } from "vue";
  import { Search } from "@element-plus/icons-vue";
  import { ElMessageBox } from "element-plus";
  import {
@@ -214,6 +287,8 @@
    searchForm: {
      tankNo: "",
      category: "",
      isEnabled: "",
      usageType: "",
    },
    form: {
      id: null,
@@ -222,6 +297,8 @@
      oilProduct: "",
      capacity: null,
      remaining: null,
      isEnabled: 1,
      usageType: null,
      tenantInfo: "",
    },
    rules: {
@@ -230,6 +307,24 @@
    },
  });
  const { searchForm, form, rules } = toRefs(data);

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

  // 未启用时用途与租客信息一律清空；选自用时租客信息自动清空（租赁才需要租客）
  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 +354,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 ?? "",
      };
    }
  };