参数配置

zhouwx

2024-12-25 c53fc4edf8587a1ba44d5a57139baee3dcaba0b0

 src/views/basicDataManage/gasManage/index.vue

@@ -1,139 +1,204 @@
<template>
    <div class="system-gas-container">
        <el-card shadow="hover">
            <div class="system-menu-search mb15">
                <el-form :inline="true" >
                    <el-form-item label="气体名称：">
                        <el-input  v-model="state.tableData.listQuery.searchParams.name"  placeholder="气体名称" ></el-input>
                    </el-form-item>
                    <el-button size="default" type="primary" class="ml10" @click="search()">
                        <el-icon>
                            <ele-Search />
                        </el-icon>
                        查询
                    </el-button>
                    <el-button size="default" class="ml10" @click="reset()">
                        <el-icon>
                            <RefreshLeft />
                        </el-icon>
                        重置
                    </el-button>
                </el-form>
            </div>
            <el-button size="default" class="mb10" type="success" @click="openDialog('新增',{})">
                <el-icon>
                    <ele-FolderAdd />
                </el-icon>
                新增气体
            </el-button>
  <div class="system-gas-container">
    <el-card shadow="hover">
      <div class="system-menu-search mb15">
        <el-form :inline="true" >
          <el-form-item label="气体名称：">
            <el-input  v-model="state.tableData.listQuery.searchParams.name"  placeholder="气体名称" ></el-input>
          </el-form-item>
          <el-button size="default" type="primary" class="ml10" @click="search()">
            <el-icon>
              <ele-Search />
            </el-icon>
            查询
          </el-button>
          <el-button size="default" class="ml10" @click="reset()">
            <el-icon>
              <RefreshLeft />
            </el-icon>
            重置
          </el-button>
        </el-form>
      </div>
      <el-button size="default" class="mb10" type="success" @click="openDialog('新增',{})">
        <el-icon>
          <ele-FolderAdd />
        </el-icon>
        新增气体
      </el-button>

            <el-table :data="state.tableData.data" style="width: 100%">
                <el-table-column align="center" type="index" label="序号" width="60" />
                <el-table-column align="center" prop="gasName" label="气体名称"/>
                <el-table-column align="center" prop="gasMolecularFormula" label="气体分子式"/>
                <el-table-column align="center" prop="gasThreshold" label="气体阈值"/>
                <el-table-column align="center" prop="gasUnit" label="气体单位"/>
                <el-table-column label="操作" show-overflow-tooltip width="140">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="openDialog('查看', scope.row)">查看</el-button>
                        <el-button size="small" text type="primary" @click="openDialog('编辑', scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
      <el-table :data="state.tableData.data" style="width: 100%" :row-key="row => row.id" :expand-row-keys="expandRowKeys" @expand-change="handleExpandChange" >
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.gasCategoryConfigurations" style="width: 90%;margin-left: 5%" border>
              <el-table-column label="方位" prop="orientation" align="center">
                <template #default="scope">
                  <span>{{scope.row.orientation == 1 ? '方位1' : scope.row.orientation == 2 ? '方位2' :scope.row.orientation == 3? '方位3': '--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="本底浓度" prop="concentration" align="center"  />
              <el-table-column label="倍增系数" prop="multiplication" align="center" />
              <el-table-column label="操作" show-overflow-tooltip width="120" >
                <template #default="scope">
                  <el-button size="small" text type="primary" @click="configP('编辑',scope.row)">编辑</el-button>
                  <el-button size="small" text type="danger" @click="delP(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <br />
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="page-position"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="state.tableData.listQuery.pageIndex"
                background
                v-model:page-size="state.tableData.listQuery.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="state.tableData.total">
            </el-pagination>
            <br />
            <br />
        </el-card>
        <gas-dialog ref="gasRef" @getGasData="initGasData"></gas-dialog>
    </div>
          </template>
        </el-table-column>
        <el-table-column align="center" type="index" label="序号" width="70" />
        <el-table-column align="center" prop="gasName" label="气体名称"/>
        <el-table-column align="center" prop="gasMolecularFormula" label="气体分子式"/>
        <el-table-column align="center" prop="gasThreshold" label="气体阈值"/>
        <el-table-column align="center" prop="gasUnit" label="气体单位"/>
        <el-table-column label="操作" show-overflow-tooltip width="180">
          <template #default="scope">
            <el-button size="small" text type="primary" @click="configP('新增', scope.row)">参数配置</el-button>
            <el-button size="small" text type="primary" @click="openDialog('查看', scope.row)">查看</el-button>
            <el-button size="small" text type="primary" @click="openDialog('编辑', scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-pagination
          @size-change="onHandleSizeChange"
          @current-change="onHandleCurrentChange"
          class="page-position"
          :pager-count="5"
          :page-sizes="[10, 20, 30]"
          v-model:current-page="state.tableData.listQuery.pageIndex"
          background
          v-model:page-size="state.tableData.listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="state.tableData.total">
      </el-pagination>
      <br />
      <br />
    </el-card>
    <gas-dialog ref="gasRef" @getGasData="initGasData"></gas-dialog>
    <config-dialog ref="configRef" @getGasData="initGasData"></config-dialog>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import { TableDataState } from "/@/types/gasManage";
import gasDialog from "./component/gasDialog.vue";
import configDialog from "./component/config.vue";
import { gasManageApi } from "/@/api/basicDataManage/gasManage";
import {ElMessage} from "element-plus";
import {ElMessageBox} from "element-plus/es";
import {areaManageApi} from "/@/api/basicDataManage/areaManage";

const gasRef = ref();
const configRef = ref();

const state = reactive<TableDataState>({
    tableData: {
        data: [],
        total: 0,
        loading: false,
        listQuery: {
            pageIndex: 1,
            pageSize: 10,
            searchParams:{
                name :''
            }
        }
  tableData: {
    data: [],
    total: 0,
    loading: false,
    listQuery: {
      pageIndex: 1,
      pageSize: 10,
      searchParams:{
        name :''
      }
    }
  }
});
//页面加载
onMounted(() => {
    initGasData();
  initGasData();
});

const expandRowKeys = ref([])
const initGasData = async () => {
    let res = await gasManageApi().getGasPage(state.tableData.listQuery);
    console.log("res",res)
    if (res.data.code === 100) {
        if(res.data.data && res.data.data.length > 0){
            state.tableData.data = res.data.data.map((item: any) => {
                return {
                    id: item.id,
                    gasName: item.name,
                    gasMolecularFormula: item.molecularFormula,
                    gasThreshold: item.threshold,
                    gasUnit: item.unit
                }
            });
        }else {
            state.tableData.data = [];
  let res = await gasManageApi().getGasPage(state.tableData.listQuery);
  console.log("res",res)
  if (res.data.code === 100) {
    if(res.data.data && res.data.data.length > 0){
      state.tableData.data = res.data.data.map((item: any) => {
        return {
          ...item,
          id: item.id,
          gasName: item.name,
          gasMolecularFormula: item.molecularFormula,
          gasThreshold: item.threshold,
          gasUnit: item.unit,
        }
        state.tableData.total = res.data.total;
        state.tableData.listQuery.pageIndex = res.data.pageIndex;
        state.tableData.listQuery.pageSize = res.data.pageSize;
    } else {
        ElMessage({
            type: 'warning',
            message: res.data.msg
        });
      });
    }else {
      state.tableData.data = [];
    }
    state.tableData.total = res.data.total;
    state.tableData.listQuery.pageIndex = res.data.pageIndex;
    state.tableData.listQuery.pageSize = res.data.pageSize;
  } else {
    ElMessage({
      type: 'warning',
      message: res.data.msg
    });
  }
};
const onHandleSizeChange = (val: number) => {
    state.tableData.listQuery.pageSize = val;
    initGasData();
  state.tableData.listQuery.pageSize = val;
  initGasData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.tableData.listQuery.pageIndex = val;
    initGasData();
  state.tableData.listQuery.pageIndex = val;
  initGasData();
};
const openDialog = (type: string, value: any) => {
    gasRef.value.openDialog(type, value);
  gasRef.value.openDialog(type, value);
};
const search = () => {
    state.tableData.listQuery.pageIndex = 1;
    initGasData();
  state.tableData.listQuery.pageIndex = 1;
  initGasData();
}
const reset = () => {
    state.tableData.listQuery.searchParams.name = '';
    state.tableData.listQuery.pageIndex = 1;
    initGasData();
  state.tableData.listQuery.searchParams.name = '';
  state.tableData.listQuery.pageIndex = 1;
  initGasData();
}
const configP = (type:string,value:any) => {
  configRef.value.openDialog(type, value);
}

const delP = (value:any) => {
  ElMessageBox.confirm(
      '确定删除此条数据？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        let res = await gasManageApi().delConfig({id: value.id});
        if(res.data.code == 100) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          });
          reset();
        }else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      })
}
const handleExpandChange = (row:any, expandedRows:any) => {
  const Ids = []
  expandedRows.forEach(element => {
    Ids.push(element.id)
  })
  expandRowKeys.value = Ids
  console.log('展开的id,this.expandedRowIds', expandRowKeys.value)
}
</script>
<style scoped lang="scss">