| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="search_form"> |
| | | <div> |
| | | <el-form :model="searchForm" |
| | | :inline="true"> |
| | | <el-form-item label="å¨ç½å·ï¼"> |
| | | <el-input v-model="searchForm.tankNo" |
| | | placeholder="请è¾å
¥" |
| | | clearable |
| | | prefix-icon="Search" |
| | | @change="handleQuery" /> |
| | | </el-form-item> |
| | | <el-form-item label="大类ï¼"> |
| | | <el-input v-model="searchForm.category" |
| | | placeholder="请è¾å
¥" |
| | | clearable |
| | | 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"> æç´¢ |
| | | </el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | </div> |
| | | <div class="table_list"> |
| | | <div style="display: flex;justify-content: flex-end;margin-bottom: 20px;"> |
| | | <el-button type="primary" |
| | | @click="openForm('add')">æ°å¢å¨ç½</el-button> |
| | | <el-button type="danger" |
| | | plain |
| | | @click="handleDelete()">å é¤ |
| | | </el-button> |
| | | </div> |
| | | <el-table :data="tableData" |
| | | border |
| | | v-loading="tableLoading" |
| | | @selection-change="handleSelectionChange"> |
| | | <el-table-column align="center" |
| | | type="selection" |
| | | width="55" /> |
| | | <el-table-column align="center" |
| | | label="åºå·" |
| | | type="index" |
| | | width="60" /> |
| | | <el-table-column label="å¨ç½å·" |
| | | prop="tankNo" |
| | | min-width="140" |
| | | show-overflow-tooltip /> |
| | | <el-table-column label="大类" |
| | | prop="category" |
| | | min-width="120" |
| | | show-overflow-tooltip /> |
| | | <el-table-column label="æ²¹å" |
| | | prop="oilProduct" |
| | | min-width="120" |
| | | show-overflow-tooltip /> |
| | | <el-table-column label="ç½å®¹" |
| | | prop="capacity" |
| | | min-width="120" /> |
| | | <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" |
| | | show-overflow-tooltip /> |
| | | <el-table-column label="å建æ¶é´" |
| | | prop="createTime" |
| | | min-width="180"> |
| | | <template #default="scope"> |
| | | {{ scope.row.createTime ? scope.row.createTime.replace('T', ' ').slice(0, 19) : '--' }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column fixed="right" |
| | | label="æä½" |
| | | width="120" |
| | | align="center"> |
| | | <template #default="scope"> |
| | | <el-button link |
| | | type="primary" |
| | | @click="openForm('edit', scope.row)">ç¼è¾ |
| | | </el-button> |
| | | <el-button link |
| | | type="danger" |
| | | @click="handleDelete([scope.row])">å é¤ |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination v-show="total > 0" |
| | | :total="total" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :page="page.current" |
| | | :limit="page.size" |
| | | @pagination="paginationChange" /> |
| | | </div> |
| | | <FormDialog v-model="dialogFormVisible" |
| | | :title="operationType === 'add' ? 'æ°å¢å¨ç½' : 'ç¼è¾å¨ç½'" |
| | | :width="'40%'" |
| | | :operation-type="operationType" |
| | | @close="closeDia" |
| | | @confirm="submitForm" |
| | | @cancel="closeDia"> |
| | | <el-form :model="form" |
| | | label-width="120px" |
| | | label-position="top" |
| | | :rules="rules" |
| | | ref="formRef"> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="å¨ç½å·ï¼" |
| | | prop="tankNo"> |
| | | <el-input v-model="form.tankNo" |
| | | placeholder="请è¾å
¥" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="大类ï¼" |
| | | prop="category"> |
| | | <el-input v-model="form.category" |
| | | placeholder="请è¾å
¥" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="æ²¹åï¼" |
| | | prop="oilProduct"> |
| | | <el-select v-model="form.oilProduct" |
| | | placeholder="è¯·éæ©" |
| | | clearable |
| | | style="width: 100%"> |
| | | <el-option label="æ±½#92" |
| | | value="æ±½#92" /> |
| | | <el-option label="æ±½#95" |
| | | value="æ±½#95" /> |
| | | <el-option label="æ´#0" |
| | | value="æ´#0" /> |
| | | <el-option label="æ´#-35" |
| | | value="æ´#-35" /> |
| | | <el-option label="åæ²¹" |
| | | value="åæ²¹" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ç½å®¹ï¼" |
| | | prop="capacity"> |
| | | <el-input-number v-model="form.capacity" |
| | | :precision="2" |
| | | :step="1" |
| | | :min="0" |
| | | style="width: 100%" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="åºåä½éï¼" |
| | | prop="remaining"> |
| | | <el-input-number v-model="form.remaining" |
| | | :precision="2" |
| | | :step="1" |
| | | :min="0" |
| | | style="width: 100%" /> |
| | | </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" |
| | | :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> |
| | | </el-form> |
| | | </FormDialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import FormDialog from "@/components/Dialog/FormDialog.vue"; |
| | | import pagination from "@/components/PIMTable/Pagination.vue"; |
| | | import { ref, reactive, toRefs, watch, computed, getCurrentInstance } from "vue"; |
| | | import { Search } from "@element-plus/icons-vue"; |
| | | import { ElMessageBox } from "element-plus"; |
| | | import { |
| | | listTankInfo, |
| | | addTankInfo, |
| | | 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); |
| | | const dialogFormVisible = ref(false); |
| | | const operationType = ref(""); |
| | | const page = reactive({ |
| | | current: 1, |
| | | size: 10, |
| | | }); |
| | | const total = ref(0); |
| | | |
| | | const data = reactive({ |
| | | searchForm: { |
| | | tankNo: "", |
| | | category: "", |
| | | isEnabled: "", |
| | | usageType: "", |
| | | }, |
| | | form: { |
| | | id: null, |
| | | tankNo: "", |
| | | category: "", |
| | | oilProduct: "", |
| | | capacity: null, |
| | | remaining: null, |
| | | isEnabled: 1, |
| | | usageType: null, |
| | | tenantInfo: "", |
| | | }, |
| | | rules: { |
| | | tankNo: [{ required: true, message: "请è¾å
¥å¨ç½å·", trigger: "blur" }], |
| | | category: [{ required: true, message: "请è¾å
¥å¤§ç±»", trigger: "blur" }], |
| | | }, |
| | | }); |
| | | 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; |
| | | listTankInfo({ ...searchForm.value, ...page }) |
| | | .then(res => { |
| | | tableLoading.value = false; |
| | | tableData.value = res.data.records || []; |
| | | total.value = res.data.total || 0; |
| | | }) |
| | | .catch(() => { |
| | | tableLoading.value = false; |
| | | }); |
| | | }; |
| | | |
| | | const handleQuery = () => { |
| | | page.current = 1; |
| | | getList(); |
| | | }; |
| | | |
| | | const paginationChange = obj => { |
| | | page.current = obj.page; |
| | | page.size = obj.limit; |
| | | getList(); |
| | | }; |
| | | |
| | | const handleSelectionChange = selection => { |
| | | 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; |
| | | // å
éç½®åèµå¼ï¼resetFields 伿忮µæåæè½½æ¶çåå¼ï¼æ¾åé¢ä¼æå填好ç弿¸
æ |
| | | proxy.resetForm("formRef"); |
| | | form.value = buildEmptyForm(); |
| | | dialogFormVisible.value = true; |
| | | if (type === "edit" && row) { |
| | | 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 ?? "", |
| | | }; |
| | | } |
| | | }; |
| | | |
| | | const submitForm = () => { |
| | | proxy.$refs["formRef"].validate(valid => { |
| | | if (valid) { |
| | | const api = form.value.id ? updateTankInfo : addTankInfo; |
| | | api(form.value).then(() => { |
| | | proxy.$modal.msgSuccess("æä½æå"); |
| | | closeDia(); |
| | | getList(); |
| | | }); |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const closeDia = () => { |
| | | proxy.resetForm("formRef"); |
| | | dialogFormVisible.value = false; |
| | | }; |
| | | |
| | | const handleDelete = rows => { |
| | | let ids = []; |
| | | if (rows) { |
| | | ids = rows.map(item => item.id); |
| | | } else if (selectedRows.value.length > 0) { |
| | | ids = selectedRows.value.map(item => item.id); |
| | | } else { |
| | | proxy.$modal.msgWarning("è¯·éæ©æ°æ®"); |
| | | return; |
| | | } |
| | | ElMessageBox.confirm("éä¸çå
容å°è¢«å é¤ï¼æ¯å¦ç¡®è®¤å é¤ï¼", "å é¤", { |
| | | confirmButtonText: "确认", |
| | | cancelButtonText: "åæ¶", |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | delTankInfo(ids).then(() => { |
| | | proxy.$modal.msgSuccess("å 餿å"); |
| | | getList(); |
| | | }); |
| | | }) |
| | | .catch(() => { |
| | | proxy.$modal.msg("已忶"); |
| | | }); |
| | | }; |
| | | |
| | | getList(); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .search_form { |
| | | margin-bottom: 16px; |
| | | } |
| | | </style> |