整体样式修改

gaoluyang

7 天以前 4b4530087295f9b53dcff84888b7a08c07640846

 src/views/basicInformation/index.vue

@@ -1,12 +1,11 @@
<template>
  <div class="app-container">
      <el-form :inline="true" :model="queryParams" class="search-form">
          <el-form :inline="true" :model="queryParams" class="search-form">
        <el-form-item label="搜索">
          <el-input
            v-model="queryParams.searchText"
            placeholder="请输入关键词"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item label="供应商名称">
@@ -14,7 +13,6 @@
            v-model="queryParams.supplierName"
            placeholder="请输入"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item label="统一人识别号">
@@ -22,7 +20,6 @@
            v-model="queryParams.identifyNumber"
            placeholder="请输入"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item label="经营地址">
@@ -30,7 +27,6 @@
            v-model="queryParams.address"
            placeholder="请输入"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item>
@@ -72,7 +68,7 @@
          @delete="handleDeleteSuccess"
          :show-selection="true"
          :border="true"
          :maxHeight="440"
          :maxHeight="480"
        />
      </div>
      <pagination
@@ -99,6 +95,7 @@
        :form="form"
        :title="title"
        @submit="handleSubmit"
        :addOrEdit="addOrEdit"
        @beforeClose="handleBeforeClose"
      />
      <Coal
@@ -106,6 +103,15 @@
        v-model:coalDialogFormVisible="dialogFormVisible"
        :form="form"
        :title="title"
        :addOrEdit="addOrEdit"
        @submit="handleSubmit"
      />
      <coalQualityMaintenance
        v-if="tabName === 'coalQualityMaintenance'"
        v-model:coalQualityMaintenanceDialogFormVisible="dialogFormVisible"
        :form="form"
        :title="title"
        :addOrEdit="addOrEdit"
        @submit="handleSubmit"
      />
    </el-card>
@@ -121,8 +127,10 @@
import Supplier from "./mould/supplier.vue";
import Customer from "./mould/customer.vue";
import Coal from "./mould/coal.vue";
import coalQualityMaintenance from "./mould/coalQualityMaintenance.vue";
const { proxy } = getCurrentInstance()
// 弹窗
const coalQualityMaintenanceDialogFormVisible = ref(false);
const customerDialogFormVisible = ref(false);
const coalDialogFormVisible = ref(false);
const supplierDialogFormVisible = ref(false);
@@ -134,7 +142,7 @@
const tabName = ref("supplier");
// 状态变量
const loading = ref(false);
const total = ref(200);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const activeTab = ref("supplier");
@@ -155,6 +163,7 @@
  { name: "supplier", label: "供应商信息" },
  { name: "customer", label: "客户信息" },
  { name: "coal", label: "煤种信息" },
  { name: "coalQualityMaintenance", label: "煤质维护" },
]);
// 是否编辑
const addOrEdit = ref("add");
@@ -168,10 +177,11 @@
  }, 500);
};
// supplier 供应商数据
const supplierColumns = reactive([
const supplierColumns = ref([
  { prop: "supplierName", label: "供应商名称", minWidth: 200 },
  { prop: "identifyNumber", label: "统一人识别号", minWidth: 120 },
  { prop: "address", label: "经营地址", minWidth: 150 },
  { prop: "detailedaddress", label: "详细地址", minWidth: 150 },
  { prop: "bank", label: "开户行", minWidth: 120 },
  { prop: "bankAccount", label: "银行账号", minWidth: 150 },
  { prop: "contacts", label: "联系人", minWidth: 100 },
@@ -180,10 +190,11 @@
  { prop: "maintainDate", label: "维护日期", minWidth: 100 },
]);
// customer 客户数据
const customerColumns = reactive([
const customerColumns = ref([
  { prop: "customerName", label: "客户名称", minWidth: 200 },
  { prop: "identifyNumber", label: "统一人识别号", minWidth: 120 },
  { prop: "address", label: "经营地址", minWidth: 150 },
  { prop: "detailedaddress", label: "详细地址", minWidth: 150 },
  { prop: "bank", label: "开户行", minWidth: 120 },
  { prop: "bankAccount", label: "银行账号", minWidth: 150 },
  { prop: "contacts", label: "联系人", minWidth: 100 },
@@ -192,10 +203,21 @@
  { prop: "maintainDate", label: "维护日期", minWidth: 100 },
]);
// coal 煤种数据
const coalColumns = reactive([
const coalColumns = ref([
  { prop: "coalName", label: "煤种名称", minWidth: 200 },
  { prop: "maintainer", label: "维护人", minWidth: 120 },
  { prop: "maintenanceDate", label: "维护日期", minWidth: 150 },
]);
// coalQualityMaintenance 煤质维护数据
const coalQualityMaintenanceColumns = ref([
  { prop: "supplierName", label: "全水(<)", minWidth: 200 },
  { prop: "identifyNumber", label: "水分析(<)", minWidth: 120 },
  { prop: "address", label: "灰分", minWidth: 150 },
  { prop: "bank", label: "挥发(>)", minWidth: 100 },
  { prop: "bankAccount", label: "硫(<)", minWidth: 100 },
  { prop: "contacts", label: "固定碳", minWidth: 100 },
  { prop: "contactAddress", label: "高位发热量", minWidth: 100 },
  { prop: "maintainer", label: "低位发热量", minWidth: 100 },
]);
// 标签页点击
const handleTabClick = (tab) => {
@@ -208,16 +230,20 @@
  getList();
  switch (tabName.value) {
    case "supplier":
      columns.value = supplierColumns;
      columns.value = supplierColumns.value;
      dialogFormVisible.value = supplierDialogFormVisible.value;
      break;
    case "customer":
      columns.value = customerColumns;
      columns.value = customerColumns.value;
      dialogFormVisible.value = customerDialogFormVisible.value;
      break;
    case "coal":
      columns.value = coalColumns;
      columns.value = coalColumns.value;
      dialogFormVisible.value = coalDialogFormVisible.value;
      break;
    case "coalQualityMaintenance":
      columns.value = coalQualityMaintenanceColumns.value;
      dialogFormVisible.value = coalQualityMaintenanceDialogFormVisible.value;
      break;
  }
  setTimeout(() => {
@@ -240,7 +266,7 @@
};
// 新增编辑
const handleAddEdit = (tabName) => {
  addOrEdit.value == "add" ? (title.value = "新增") : (title.value = "编辑");
  addOrEdit.value == "add" ? title.value = "新增" : title.value = "编辑";
  if (tabName === "supplier") {
    dialogFormVisible.value = true;
    title.value = title.value + "供应商信息";
@@ -252,6 +278,10 @@
  } else if (tabName === "coal") {
    dialogFormVisible.value = true;
    title.value = title.value + "煤种信息";
    openDialog();
  } else if (tabName === "coalQualityMaintenance") {
    dialogFormVisible.value = true;
    title.value = title.value + "煤质维护";
    openDialog();
  }
};
@@ -266,9 +296,14 @@
  dialogFormVisible.value = true;
};
// 提交表单
const handleSubmit = (val) => {
const handleSubmit = () => {
  // 拿到提交数据
  dialogFormVisible.value = false;
  if (addOrEdit.value === "add") {
    ElMessage.success("新增成功：" + copyForm.value.supplierName);
  } else {
    ElMessage.success("编辑成功：" + copyForm.value.supplierName);
  }
  getList();
};
const handleDialogFormVisible = (value) => {
@@ -326,6 +361,7 @@
};
const getList = () => {
  loading.value = true;

  setTimeout(() => {
    // 暂时引入测试数据
    tableData.value = [
@@ -473,21 +509,6 @@
</script>

<style scoped>
.app-container{
  box-sizing: border-box;
}
.search-form {
  background-color: #fff;
  padding: 20px 20px 0 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}
.search-form :deep(.el-form-item) {
  margin-bottom: 16px;
  width: 100%;
}

/* 响应式布局 */
@media screen and (min-width: 768px) {
  .search-form :deep(.el-form-item) {
@@ -496,11 +517,8 @@
}
@media screen and (min-width: 1200px) {
  .search-form :deep(.el-form-item) {
    width: 18%;
    width: 16%;
  }
}
.info-tabs {
  margin-bottom: 20px;
}
.table-toolbar {
  margin-bottom: 20px;
@@ -508,7 +526,6 @@
  flex-wrap: wrap;
  gap: 10px;
}

/* 响应式表格 */
@media screen and (max-width: 768px) {
  .table-toolbar {
@@ -525,4 +542,10 @@
.table-toolbar{
  margin-bottom: 20px !important;
}
.el-form--inline .el-form-item {
  margin-right: 25px;
}
.main-container{
  background: red !important;
}
</style>