| | |
|---|
| | | <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="是否启用" |
|---|
| | |
|---|
| | | </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" |
|---|
| | |
|---|
| | | trigger: 'blur', |
|---|
| | | } |
|---|
| | | ]"> |
|---|
| | | <el-input v-model="form.tenantInfo" |
|---|
| | | placeholder="请输入租客信息" |
|---|
| | | clearable /> |
|---|
| | | <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> |
|---|
| | |
|---|
| | | <script setup> |
|---|
| | | import FormDialog from "@/components/Dialog/FormDialog.vue"; |
|---|
| | | import pagination from "@/components/PIMTable/Pagination.vue"; |
|---|
| | | import { ref, reactive, toRefs, watch, 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 { |
|---|
| | |
|---|
| | | 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); |
|---|
| | |
|---|
| | | // 用途文案：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], |
|---|
