admin_web/ruoyi-ui/src/views/base/addBase/index.vue

<template>
  <div class="app-container">
    <el-form :model="form" ref="form" size="small" :inline="true" label-position="left" label-width="70px">
      <el-form-item>
          <el-input v-model="form.label" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleCurrentGetList">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleOpenDialog('add', {})">新增</el-button>
      </el-form-item>
    </el-form>
    <tableList
      ref="table"
      :column="tableConfig"
      showOperation
      operationWidth="100px"
      :checkbox="false"
      :getList="handleGetList"
    >
      <!-- 列表操作页 -->
      <template #default="scope">
        <!-- 已生效只能看详情 -->
        <f-btn type="text" @click="handleOpenDialog('edit',scope.row)">编辑</f-btn>
        <f-btn type="delete" @click="handleDelete('del', scope.row)">删除</f-btn>
      </template>
    </tableList>
    <!-- 详情弹窗 -->
    <detail-dialog 
      ref="detailDialog" 
      :rowData="rowData" 
      :dialogType="dialogType" 
      @updateList="handleCurrentGetList"
    />
  </div>
</template>
<script>
import DetailDialog from './blocks/detailDialog.vue';
import tableList from "@/comComponents/tableList";
import { addBaseApi } from '@/api/base/addBase'

// 下拉框选项
const useStatus = [
  { name: '启用', value: '0' },
  { name: '禁用', value: '1' },
];

export default {
  components: { DetailDialog, tableList },
  data() {
    return {
      form: {
        label: '',
        bootCodeStatus:'0'
      },
      tableConfig: [
        { "name": "基础库名" },
        { "bandValue": "波段值" },
        { "repeatCode": "重发间隔(ms)" },
        { "bootCode": "引导码" },
        { "bootCodeSend": "引导码发送次数"},
        { "synchronizeCode": "同步码" },
        { "synchronizeCodeSend": "同步码发送次数"},
        { "dateBinary0": "数据二进制0" },
        { "dateBinary1": "数据二进制1" },
        { "overCode": "结束码" },
        { "status": "状态", formatter: row => this.selectDictLabel(useStatus, row.status)},
        { "createTime": "创建时间", formatter:row => this.dayjs(row.createTime).format("YYYY-MM-DD HH:mm")}
      ],
      // 弹窗数据对象
      rowData:{},
      // 弹窗类型
      dialogType:'add',
      // 弹窗更新key
      dialogKey:0
    }
  },
  methods: {
    selectDictLabel(listObj, key) {
      return listObj.find(item => item.value == key).name
    },
    // 查询列表
    handleCurrentGetList(){
      this.$refs.table.handleQueryList();
    },
    // 获取列表
    async handleGetList(page) {
      const res = await addBaseApi.getList(
        {
          ...page,
          name:this.form.label
        }
      );
      if(res.code!= 200 ) return {
        current:1,
        records:[],
        total:0
      }
      return res.data;
    },
    // 打开详情、编辑\新增弹窗事件
    handleOpenDialog(type, rowData) {
      console.log(type, rowData, '当前数据列项！')
      this.dialogType = type;
      this.rowData = {...rowData};
      this.$nextTick(()=>{
        this.$refs.detailDialog.show();
      })
    },
    // 编辑状态
    handleDelete(type, row) {
      this.$modal.confirm('是否确认删除此配置').then(async ()=> {
        const res = await addBaseApi.configDelete({ id: row.id });
        if(res.code != 200){
          this.$modal.msgErrpr(res.msg || "操作失败");
          return false;
        }
        this.handleCurrentGetList();
        this.$modal.msgSuccess("操作成功");
      })
    }
  },
  mounted() {
    this.handleCurrentGetList()
  },
}
</script>
<style lang="scss" scoped>
</style>