ojk_dtb_manage_ui/src/components/dataManage/dataShow/BusinessData.vue

<!-- 业务数据 -->
<template>
  <div id="data">
    <el-button type="primary" @click="addDataClick">录入业务数据</el-button>
    <el-button type="warning" @click="batchDelete">批量删除</el-button>
    <div class="operation">
      <el-form :model="filterForm" :inline="true">
        <el-form-item label="地名地址库名称：">
          <el-input v-model="filterForm.name" placeholder="请输入地名地址库名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="list">
      <el-table ref="dataTable" v-loading="loading" element-loading-text="正在加载，请稍后..." :data="tableData"
                :border="true" :stripe="true" :height="440" style="width: 100%;margin-bottom: 15px;"
                @selection-change="handleTableSelect">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="id" label="ID" width="100" :show-overflow-tooltip="true">
          <template #default="scope">
            <span style="cursor: pointer" @click="$util.clipboard.copyText(scope.row.id)"> {{ scope.row.id }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="200"/>
        <el-table-column prop="content" label="描述" width="250"/>
        <el-table-column prop="menuNameTwo" label="类别" width="80"/>
        <el-table-column prop="importType" label="导入类型" width="150"/>
        <el-table-column prop="updator" label="修改人"/>
        <el-table-column prop="updateDate" label="修改时间" width="160">
          <template #default="scope">
            {{ $util.datetime.format(scope.row.updateDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="创建人"/>
        <el-table-column prop="createDate" label="创建时间" width="160">
          <template #default="scope">
            {{ $util.datetime.format(scope.row.createDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" content="查看详情" placement="top-start">
              <el-button type="default" @click="viewData(scope.row)" circle>
                <el-icon>
                  <ElIconView/>
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-tooltip class="box-item" effect="dark" content="编辑" placement="top-start">
              <el-button type="primary" @click="editData(scope.row)" circle>
                <el-icon>
                  <ElIconEdit/>
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-tooltip class="box-item" effect="dark" content="删除" placement="top-start">
              <el-button type="danger" @click="deleteData(scope.row)" circle>
                <el-icon>
                  <ElIconDelete/>
                </el-icon>
              </el-button>
            </el-tooltip>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="float:right" background layout="sizes, prev, pager, next, jumper, total"
                     v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.pageSize"
                     v-model:total="pageInfo.total"/>
    </div>
  </div>

  <BusinessDataDetail v-if="isDetailShow" :is-show="isDetailShow" :item="currRow" :close="handleDetailShow"></BusinessDataDetail>
</template>

<script>
import api from '@/api/data/BusinessData'
import BusinessDataDetail from "@/components/dataManage/dataDetail/BusinessDataDetail";
import menuApi from "@/api/data/MenuData";

export default {
  data() {
    return {
      loading: false,
      filterForm: {},
      tableData: [],
      currRow: {},
      selectedRows: [],
      pageInfo: {
        page: 1,
        pageSize: 10,
        total: 0,
      },

      isDetailShow: false,
    }
  },
  components: {
    BusinessDataDetail
  },
  created() {
  },
  mounted() {
    this.getData();
  },
  watch: {
    "pageInfo.page": function (val) {
      if (val > 0) {
        this.getData();
      }
    },
    "pageInfo.pageSize": function () {
      let app = this;
      this.pageInfo.page = -1;
      setTimeout(function () {
        app.pageInfo.page = 1;
      }, 50)
    },
  },
  methods: {
    handleLoading(flag) {
      let app = this;
      if (flag) {
        app.loading = true;
      } else {
        setTimeout(() => {
          app.loading = false;
        }, 500);
      }
    },
    getData() {
      let app = this;
      let params = {
        page: app.pageInfo.page,
        pageSize: app.pageInfo.pageSize
      }
      app.handleLoading(true)
      api.getData(params).then(res => {
        if (res.code === 200) {
          app.pageInfo.total = res.total;
          app.tableData = res.content
        }
        app.handleLoading(false)
      }).catch(err => {
        app.handleLoading(false)
      })
    },
    search() {

    },
    handleTableSelect(val) {
      this.selectedRows = val;
    },
    handleDetailShow(flag) {
      if (flag) {
        this.getData()
      }
      this.isDetailShow = false
    },
    // 录入数据
    addDataClick() {
      this.currRow = {};
      this.isDetailShow = true;
    },
    // 批量删除数据
    batchDelete() {
      if (!this.selectedRows) {
        return;
      }
      let ids = this.selectedRows.map(i=> {return i.id}).join(',');
    },
    // 查看详情
    viewData(item) {
      let app = this;
      if (item.menuId) {
        item.menuId = Number(item.menuId);
      }
      app.currRow = JSON.parse(JSON.stringify(item))
      app.currRow.geometryStr = JSON.stringify(item.geometry)
      delete app.currRow.geometry
      this.currRow.isDataView = true;
      app.isDetailShow = true
    },
    // 编辑数据
    editData(item) {
      let app = this;
      if (item.menuId) {
        item.menuId = Number(item.menuId);
      }
      app.currRow = JSON.parse(JSON.stringify(item))
      app.currRow.geometryStr = JSON.stringify(item.geometry)
      delete app.currRow.geometry
      this.currRow.isEdit = true;
      app.isDetailShow = true
    },
    // 删除数据
    deleteData(item) {
      let app = this;
      let params = {
        baseDataId: item.id
      }
      app.$msgbox.confirm('确认要删除此条数据吗？').then(()=>{
        api.deleteData(params).then(res=>{
          if (res.code === 200) {
            app.getData();
            app.$message({message: '删除成功', type: 'success'});
          }
        })
      })
    },
  }
}
</script>

<style>
#data .operation {
  float: right;
}
</style>