SMO/src/views/system/disposition/components/serviceBeidou.vue

<template>
  <div style="display: flex;flex-direction: column;height: 86vh">
    <div style="flex-grow: 1;">
      <!-- 表格头部 操作按钮 -->
      <div class="table-header">
        <div class="header-button-lf">
          <el-form :model="queryParams" label-width="auto"  :inline="true">
            <el-form-item>
              <!-- <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" style="height: 70vh">
        <el-table-column align="left" label="序号" width="45px" :show-overflow-tooltip="true">
          <template #default="scope">
            {{ 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 === 'bd_codec'">
                <div>{{ scope.row.bd_codec == 0 ? '2.5协议' : scope.row.bd_type == 1 ? '4.0协议' :  '其他'}}</div>
              </template>
              <template v-if="item.prop === 'bd_type'">
                <div>{{ scope.row.bd_type == 0 ? '北斗普通机' : scope.row.bd_type == 1 ? '北斗指挥机' : scope.row.bd_type == 2 ? '北斗授时模块' :  '其他'}}</div>
              </template>
              <!-- <template v-if="item.prop === 'operation'">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <el-button type="primary" link @click="handleUpdate">
                    <el-icon >
                      <Edit />
                    </el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button type="primary" link  @click="handleDelete(scope.row)">
                    <el-icon >
                      <Delete />
                    </el-icon>
                  </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>
    </div>
    <div class="disposition-bottom">
      <el-button disabled> 重置 </el-button>
      <el-button type="primary" disabled> 确定 </el-button>
    </div>
    <!-- 添加或修改对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="本机北斗ID号" prop="id">
          <el-input v-model="form.id" placeholder="请输入本机北斗ID号" />
        </el-form-item>
        <el-form-item label="通信机型号" prop="models">
          <el-select v-model="form.models" filterable placeholder="请选择" clearable>
            <el-option label="北斗普通机" value="0" />
            <el-option label="北斗指挥机" value="1" />
            <el-option label="北斗授时模块" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="串口号" prop="port">
          <el-input v-model="form.port" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="通信机协议" prop="agreement">
          <el-select v-model="form.agreement" filterable placeholder="请选择" clearable>
            <el-option label="2.5协议" value="0" />
            <el-option label="4.0协议" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="连接参数" prop="parameter">
          <el-select v-model="form.parameter" filterable placeholder="请选择" clearable>
            <el-option label="15200,N,8,1" value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive,onMounted } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { ElMessageBox } from 'element-plus'
import { getBeidouAllSysItem } from "@/api/modules/allData";


const queryParams = ref({
  pageNum: 1,
  pageSize: 20
});

const processTableData=ref<any>([])
const getList=async ()=>{
  const {data}=await getBeidouAllSysItem()
  processTableData.value=data.list


}

// 查询功能
const handleQuery = () => {
  queryParams.value.pageNum = 1;
};

//搜索功能
const resetQuery = () => {
  queryParams.value.pageNum = 1;
};




// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "bd_code", label: "北斗号" },
  { prop: "bd_type", label: "型号" },
  { prop: "bd_codec", label: "协议" },
  { prop: "bd_serial", label: "串口号" },
  { prop: "bd_params", label: "连接参数" },
  { prop: "operation", label: "操作", width:150,align: 'center' }
]);

const dialog = reactive<any>({
  visible: false,
  title: ''
});
const formRef = ref<any>();
const rules = ref<any>(
  {
    id: [{ required: true, message: "本机北斗ID号不能为空", trigger: "blur" }],
    models: [{ required: true, message: "通信机型号不能为空", trigger: "blur" }],
    port: [{ required: true, message: "串口号不能为空", trigger: "blur" }],
    agreement: [{ required: true, message: "通信机协议不能为空", trigger: "blur" }],
    parameter: [{ required: true, message: "连接参数不能为空", trigger: "blur" }],
  }
);


const initFormData = ref<any>(
  {
    id: "",
    models: "",
    port: "",
    agreement:"",
    parameter:""
  }
);


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(() => {

    })
}
onMounted(()=>{
  getList()
})
</script>

<style scoped>
</style>