bxztApp/packages/screen/src/views/ServiceStationManagePage/index.vue

<template>
  <div class="root">
    <div class="search-box">
      <el-input
        v-model="params.mc"
        style="width: 240px; margin-right: 10px"
        size="large"
        placeholder="请输入服务点名称"
        :suffix-icon="Search"
        @change="handleSearch"
      />
      <el-select
        v-model="params.zdlx"
        style="width: 240px; margin-right: 10px"
        size="large"
        placeholder="站点类型"
        :suffix-icon="Search"
        @change="handleSearch"
        :options="zdlxOptions"
        clearable
      />
    </div>
    <div class="event-box">
      <el-button type="primary" size="large" @click="openAddDialog"
        >新增</el-button
      >
    </div>
    <DynamicTable
      :dataSource="tableData"
      :columns="columns"
      :autoHeight="true"
      :pagination="pagination"
    ></DynamicTable>
    <div class="dialog-container">
      <MyDialog
        v-model="dialogVisible"
        title="站点详情"
        :onConfirm="handleConfirm"
        :onCancel="handleCancel"
        width="40%"
      >
        <el-form
          label-position="right"
          label-width="auto"
          style="
            max-width: 600px;
            max-height: 60vh;
            overflow-y: auto;
            padding-right: 12px;
          "
        >
          <el-form-item label="区县名称">
            <el-input disabled v-model="detailData.qxmc" />
          </el-form-item>
          <el-form-item label="站点类型">
            <el-input disabled v-model="detailData.zdlx" />
          </el-form-item>
          <el-form-item label="路线编码">
            <el-input disabled v-model="detailData.lxbm" />
          </el-form-item>
          <el-form-item label="里程桩号">
            <el-input disabled v-model="detailData.lczh" />
          </el-form-item>
          <el-form-item label="行政等级">
            <el-input disabled v-model="detailData.xzdj" />
          </el-form-item>
          <el-form-item label="机动车月交通流量">
            <el-input disabled v-model="detailData.yjtll" />
          </el-form-item>
          <el-form-item label="技术等级">
            <el-input disabled v-model="detailData.jsdj" />
          </el-form-item>
          <el-form-item label="服务保障点具体名称">
            <el-input disabled v-model="detailData.mc" />
          </el-form-item>
          <el-form-item label="产权隶属单位">
            <el-input disabled v-model="detailData.ssdw" />
          </el-form-item>
          <el-form-item label="经度">
            <el-input disabled v-model="detailData.jd" />
          </el-form-item>
          <el-form-item label="纬度">
            <el-input disabled v-model="detailData.wd" />
          </el-form-item>
          <el-form-item label="充电桩根数">
            <el-input disabled v-model="detailData.cdzgs" />
          </el-form-item>
          <el-form-item label="是否对外开放">
            <el-input disabled v-model="detailData.sfdwkf" />
          </el-form-item>
          <el-form-item label="对外开放的是否有如厕功能">
            <el-input disabled v-model="detailData.sfdwkfrc" />
          </el-form-item>
        </el-form>
      </MyDialog>
      <MyDialog
        v-model="editDialogVisible"
        :title="isEdit ? '编辑站点' : '新增站点'"
        :onConfirm="isEdit ? handleEditConfirm : handleAddConfirm"
        :onCancel="handleEditCancel"
        width="40%"
      >
        <el-form
          ref="editFormRef"
          :model="editForm"
          label-position="right"
          label-width="auto"
          :rules="editRules"
          style="
            max-width: 600px;
            max-height: 60vh;
            overflow-y: auto;
            padding-right: 12px;
          "
        >
          <el-form-item label="区县名称" prop="qxmc">
            <el-input v-model="editForm.qxmc" />
          </el-form-item>
          <el-form-item label="站点类型" prop="zdlx">
            <el-select
              v-model="editForm.zdlx"
              placeholder="请选择站点类型"
              :options="zdlxOptions"
            />
          </el-form-item>
          <el-form-item label="路线编码" prop="lxbm">
            <el-input v-model="editForm.lxbm" />
          </el-form-item>
          <el-form-item label="里程桩号" prop="lczh">
            <el-input v-model="editForm.lczh" />
          </el-form-item>
          <el-form-item label="行政等级" prop="xzdj">
            <el-input v-model="editForm.xzdj" />
          </el-form-item>
          <el-form-item label="机动车月交通流量" prop="yjtll">
            <el-input v-model="editForm.yjtll" />
          </el-form-item>
          <el-form-item label="技术等级" prop="jsdj">
            <el-input v-model="editForm.jsdj" />
          </el-form-item>
          <el-form-item label="服务保障点具体名称" prop="mc">
            <el-input v-model="editForm.mc" />
          </el-form-item>
          <el-form-item label="产权隶属单位" prop="ssdw">
            <el-input v-model="editForm.ssdw" />
          </el-form-item>
          <el-form-item label="经度" prop="jd">
            <el-input v-model="editForm.jd" />
          </el-form-item>
          <el-form-item label="纬度" prop="wd">
            <el-input v-model="editForm.wd" />
          </el-form-item>
          <el-form-item label="充电桩根数" prop="cdzgs">
            <el-input v-model="editForm.cdzgs" />
          </el-form-item>
          <el-form-item label="是否对外开放" prop="sfdwkf">
            <el-input v-model="editForm.sfdwkf" />
          </el-form-item>
          <el-form-item label="对外开放的是否有如厕功能" prop="sfdwkfrc">
            <el-input v-model="editForm.sfdwkfrc" />
          </el-form-item>
          <el-form-item label="备注" prop="bz">
            <el-input v-model="editForm.bz" />
          </el-form-item>
        </el-form>
      </MyDialog>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import DynamicTable from "../../component/DynamicTable";
import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
import { request } from "@/utils/request";
import { Search } from "@element-plus/icons-vue";
import MyDialog from "../../component/MyDialog";

const tableData = ref([]);
const detailData = ref({});
const dialogVisible = ref(false);
const handleCancel = () => {
  dialogVisible.value = false;
};
const handleConfirm = () => {
  dialogVisible.value = false;
};

// 表单初始状态
const INIT_FORM = {
  id: "",
  zdlx: "",
  lxbm: "",
  qxmc: "",
  lczh: "",
  xzdj: "",
  yjtll: 0,
  jsdj: "",
  mc: "",
  ssdw: "",
  jd: "",
  wd: "",
  cdzgs: "",
  sfdwkf: "",
  sfdwkfrc: "",
  bz: "",
};
// 站点类型选项
const zdlxOptions = [
  { label: "服务设施", value: "服务设施" },
  { label: "加油站", value: "加油站" },
  { label: "加气站", value: "加气站" },
  { label: "加氢站", value: "加氢站" },
  { label: "充电站", value: "充电站" },
];

// 是否在编辑状态
const isEdit = ref(false);
const editFormRef = ref();
const editForm = reactive({ ...INIT_FORM });
const editDialogVisible = ref(false);
const openEditDialog = (row) => {
  editForm.id = row.id;
  Object.assign(editForm, row);
  editDialogVisible.value = true;
};
// 表单校验规则
const editRules = {
  qxmc: [{ required: true, message: "请输入区县名称", trigger: "blur" }],
  zdlx: [{ required: true, message: "请输入站点类型", trigger: "blur" }],
  lxbm: [{ required: true, message: "请输入路线编码", trigger: "blur" }],
  lczh: [{ required: true, message: "请输入里程桩号", trigger: "blur" }],
  xzdj: [{ required: true, message: "请输入行政等级", trigger: "blur" }],
  yjtll: [
    {
      required: true,
      message: "请输入机动车月交通流量",
      trigger: "blur",
    },
    {
      type: "number",
      message: "请输入正确的机动车月交通流量",
      trigger: "blur",
    },
  ],
  jsdj: [{ required: true, message: "请输入技术等级", trigger: "blur" }],
  mc: [
    { required: true, message: "请输入服务保障点具体名称", trigger: "blur" },
  ],
  ssdw: [{ required: true, message: "请输入产权隶属单位", trigger: "blur" }],
  jd: [{ required: true, message: "请输入经度", trigger: "blur" }],
  wd: [{ required: true, message: "请输入纬度", trigger: "blur" }],
  cdzgs: [{ required: true, message: "请输入充电桩根数", trigger: "blur" }],
  sfdwkf: [{ required: true, message: "请输入是否对外开放", trigger: "blur" }],
  sfdwkfrc: [
    {
      required: true,
      message: "请输入对外开放的是否有如厕功能",
      trigger: "blur",
    },
  ],
};
const handleEditCancel = () => {
  editDialogVisible.value = false;
};
const handleEditConfirm = async () => {
  try {
    await editFormRef.value.validate();
    const res = await request({
      url: `/api/yhz`,
      method: "PUT",
      data: toRaw(editForm),
    });
    if (res.code === "00000") {
      ElMessage({
        message: "编辑成功",
        type: "success",
      });
      getTableData();
      editDialogVisible.value = false;
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    console.log(error.message);
    ElMessage({
      message: error.message,
      type: "error",
    });
  }
};
const resetForm = () => {
  Object.assign(editForm, INIT_FORM);
};

// 打开新增站点弹窗
const openAddDialog = () => {
  resetForm();
  isEdit.value = false;
  editDialogVisible.value = true;
};

// 新增站点
const handleAddConfirm = async () => {
  try {
    await editFormRef.value.validate();
    const res = await request({
      url: "/api/yhz",
      method: "POST",
      data: toRaw(editForm),
    });
    if (res.code === "00000") {
      ElMessage({
        message: "新增成功",
        type: "success",
      });
      getTableData();
      editDialogVisible.value = false;
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    ElMessage({
      message: error.message,
      type: "error",
    });
    console.log(error.message);
  }
};

// 搜索条件
const params = reactive({
  mc: "",
  zdlx: "",
});

const handleSearch = () => {
  // 重置分页到第一页
  pagination.current = 1;
  getTableData();
};

// 获取养护站详情
const getDetailData = async (row) => {
  try {
    const res = await request({
      url: `/api/yhz/${row.id}`,
      method: "GET",
    });
    if (res.code === "00000") {
      detailData.value = res.data;
    } else {
      detailData.value = {};
      throw new Error(res.message);
    }
  } catch (error) {
    console.log(error.message);
  }
};

// 获取养护站列表
const getTableData = async () => {
  try {
    const res = await request({
      url: "/api/yhz/list",
      method: "GET",
      params: {
        ...params,
        pageNum: pagination.current,
        pageSize: pagination.pageSize,
      },
    });
    if (res.code === "00000") {
      tableData.value = res.data.records;
      pagination.total = res.data.total;
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    console.log(error.message);
  }
};
onMounted(() => {
  getTableData();
});
const columns = [
  {
    prop: "qxmc",
    label: "区县名称",
  },
  {
    prop: "zdlx",
    label: "站点类型",
  },
  {
    prop: "lxbm",
    label: "路线编码",
    // minWidth: 160,
  },
  {
    prop: "lczh",
    label: "里程桩号",
  },
  {
    prop: "xzdj",
    label: "行政等级",
  },
  {
    prop: "yjtll",
    label: "机动车月交通流量",
  },
  {
    prop: "jsdj",
    label: "技术等级",
  },
  {
    prop: "mc",
    label: "服务保障点具体名称",
  },
  {
    prop: "ssdw",
    label: "产权隶属单位",
  },
  {
    prop: "jd",
    label: "经度",
  },
  {
    prop: "wd",
    label: "纬度",
  },
  {
    prop: "cdzgs",
    label: "充电桩根数",
  },
  {
    prop: "sfdwkf",
    label: "是否对外开放",
  },
  {
    prop: "sfdwkfrc",
    label: "对外开放的是否有如厕功能",
  },
  {
    label: "操作",
    fixed: "right",
    width: 150,
    render: (row) => () =>
      h("div", { class: "action-btns" }, [
        h(
          ElButton,
          {
            type: "primary",
            link: true,
            onClick: async () => {
              await getDetailData(row);
              dialogVisible.value = true;
            },
          },
          () => "详情"
        ),
        h(
          ElButton,
          {
            type: "success",
            link: true,
            style: "margin-left: 10px;",
            onClick: async () => {
              await getDetailData(row);
              isEdit.value = true;
              openEditDialog(row);
            },
          },
          () => "编辑"
        ),
        h(
          ElButton,
          {
            type: "danger",
            link: true,
            style: "margin-left: 10px;",
            onClick: async () => {
              try {
                await ElMessageBox.confirm("确定要删除该站点吗？", "删除确认", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                });

                const res = await request({
                  url: `/api/yhz/${row.id}`,
                  method: "DELETE",
                });

                if (res.code === "00000") {
                  ElMessage.success("删除成功");
                  getTableData();
                }
              } catch (error) {
                if (error instanceof Error) {
                  ElMessage.error(error.message || "删除失败");
                }
              }
            },
          },
          () => "删除"
        ),
      ]),
  },
];

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  pageSizes: [10, 20, 50],
  layout: "prev, pager, next, jumper",
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    getTableData();
  },
});
</script>
  
  <style lang="scss" scoped>
.root {
  height: 100%;
  padding: 45px;
}
.event-box {
  margin: 20px 0;
}
</style>