123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255 |
- <template>
- <div class="table-box">
- <div class="card table-main">
- <!-- 表格头部 操作按钮 -->
- <div class="table-header">
- <div class="header-button-lf">
- <el-form-item label="站名:">
- <el-select v-model="queryParams.name" filterable placeholder="请选择" clearable style="width: 200px">
- <el-option label="自动站1" value="1" />
- </el-select>
- </el-form-item>
- <el-form :model="queryParams" label-width="auto" :inline="true">
- <el-form-item label="站号:">
- <el-select v-model="queryParams.code" filterable placeholder="请选择" clearable style="width: 200px">
- <el-option label="M1994" value="M1994" />
- <el-option label="M1995" value="M1995" />
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="handleQuery"> 查询 </el-button>
- <el-button style="margin-left: 10px" @click="resetQuery"> 重置 </el-button>
- <el-button style="margin-left: 10px" type="primary" plain @click="handleAdd"> 新增 </el-button>
- </el-form-item>
- </el-form>
- </div>
- </div>
- <!-- 表格主体 -->
- <el-table stripe ref="tableRef" :border="true" :data="processTableData" size="small">
- <el-table-column align="left" label="序号" width="80px" :show-overflow-tooltip="true">
- <template #default="scope">
- {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
- </template>
- </el-table-column>
- <template v-for="item in columns" :key="item">
- <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
- <template #default="scope">
- <template v-if="item.prop === 'operation'">
- <el-tooltip
- class="box-item"
- effect="dark"
- content="编辑"
- placement="top"
- >
- <el-button type="primary" link @click="handleUpdate">
- <img class="operation-img" src="@/assets/images/edit.png">
- </el-button>
- </el-tooltip>
- <el-tooltip
- class="box-item"
- effect="dark"
- content="删除"
- placement="top"
- >
- <el-button type="primary" link @click="handleDelete(scope.row)">
- <img class="operation-img" src="@/assets/images/delete.png">
- </el-button>
- </el-tooltip>
- </template>
- </template>
- </el-table-column>
- </template>
- <!-- 无数据 -->
- <template #empty>
- <div class="table-empty">
- <slot name="empty">
- <img src="@/assets/images/notData.png" alt="notData" />
- <div>暂无数据</div>
- </slot>
- </div>
- </template>
- </el-table>
- <!-- 分页组件 -->
- <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
- </div>
- <!-- 添加或修改对话框 -->
- <el-dialog :title="dialog.title" v-model="dialog.visible" width="1600px" append-to-body :close-on-click-modal="false">
- <el-tabs tab-position="left" class="demo-tabs" style="height: 700px">
- <el-tab-pane label="基本参数">
- <ParametersBasic></ParametersBasic>
- </el-tab-pane>
- <el-tab-pane label="观测要素">
- 观测要素
- </el-tab-pane>
- <el-tab-pane label="仪器检定证">
- 仪器检定证
- </el-tab-pane>
- <el-tab-pane label="阈值设置">
- 阈值设置
- </el-tab-pane>
- <el-tab-pane label="保障策略设置">
- 保障策略设置
- </el-tab-pane>
- <el-tab-pane label="编报项目设置">
- 编报项目设置
- </el-tab-pane>
- </el-tabs>
- </el-dialog>
- </div>
- </template>
- <script setup lang="ts" name="useProTable">
- import Pagination from "@/components/ProTable/components/Pagination.vue";
- import ParametersBasic from "./components/parametersBasic.vue";
- import { ref, reactive } from "vue";
- import { ColumnProps } from "@/components/ProTable/interface";
- import { ElMessageBox } from 'element-plus'
- const pageable = ref<any>({
- pageNum: 1,
- pageSize: 20,
- total: 1
- });
- const queryParams = ref({
- code: '',
- name:'',
- pageNum: 1,
- pageSize: 20,
- total: 2
- });
- // 查询功能
- const handleQuery = () => {
- queryParams.value.pageNum = 1;
- };
- //搜索功能
- const resetQuery = () => {
- queryParams.value.pageNum = 1;
- };
- /**
- * @description 每页条数改变
- * @param {Number} val 当前条数
- * @return void
- * */
- const handleSizeChange = (val: number) => {
- console.log(val);
- };
- /**
- * @description 当前页改变
- * @param {Number} val 当前页
- * @return void
- * */
- const handleCurrentChange = (val: number) => {
- console.log(val);
- };
- const processTableData = ref([
- {
- id: "681913747276782417",
- a: "测试验证",
- b: "固定站2",
- c: "M1927",
- d: "1级",
- e: "公园",
- f: "110°0'0”E”",
- g: "33°0'0”N",
- h: "小王",
- i: "张三",
- j: "李四",
- k: "自动"
- }
- ]);
- // 表格配置项
- const columns = reactive<ColumnProps[]>([
- { prop: "a", label: "部别" },
- { prop: "b", label: "站名" },
- { prop: "c", label: "站号" },
- { prop: "d", label: "地图层级" },
- { prop: "e", label: "地址" },
- { prop: "f", label: "经度" },
- { prop: "g", label: "纬度" },
- { prop: "h", label: "预审员"},
- { prop: "i", label: "测试组长"},
- { prop: "j", label: "台长"},
- { prop: "k", label: "观测方式"},
- { prop: "operation", label: "操作", width:150,align: 'center' }
- ]);
- const dialog = reactive<any>({
- visible: false,
- title: ''
- });
- const formRef = ref<any>();
- const initFormData = ref<any>(
- {
- code: "",
- type: "",
- name: "",
- startTime:"",
- endTime:"",
- remark: ""
- }
- );
- const form = ref<any>({...initFormData});
- /** 新增按钮操作 */
- const handleAdd = () => {
- reset();
- dialog.visible = true;
- dialog.title = "新增站台";
- }
- /** 修改按钮操作 */
- const handleUpdate = async (row?: any) => {
- reset();
- dialog.visible = true;
- dialog.title = "编辑站台";
- }
- /** 取消按钮 */
- const cancel = () => {
- reset();
- dialog.visible = false;
- }
- /** 表单重置 */
- const reset = () => {
- form.value = { ...initFormData };
- formRef.value?.resetFields();
- }
- /** 提交按钮 */
- const submitForm = () => {
- formRef.value?.validate(async (valid: boolean) => {
- if (valid) {
- dialog.visible = false;
- }
- });
- }
- /** 删除按钮操作 */
- const handleDelete = async (row?: any) => {
- ElMessageBox.confirm('是否确认删除编号为"' + row.b + '"的数据项?', {
- confirmButtonText: '删除',
- cancelButtonText: '取消',
- type: 'warning',
- title:'删除数据',
- draggable: true
- })
- .then(() => {
- })
- .catch(() => {
- })
- }
- </script>
|