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

<!-- 模型数据 -->
<template>
  <CategoryMenu :type="'model'" v-model:currVal="currCategory"></CategoryMenu>
  <div class="data" v-if="currCategory.id && currCategory.id!==''">
    <el-button v-if="auth"  type="primary" @click="addDataClick">录入模型数据</el-button>
    <el-button v-if="auth"  type="warning" @click="batchDelete">批量删除</el-button>
    <div class="operation">
      <el-form :model="filterForm" :inline="true">
        <el-form-item label="标题：" style="width: 22%">
          <el-input v-model="filterForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="描述：" style="width: 22%">
          <el-input v-model="filterForm.content" placeholder="请输入描述"></el-input>
        </el-form-item>
        <!--<el-form-item label="地名地址库：" style="width: 20%">-->
        <!--  <el-input v-model="filterForm.address" placeholder="请输入名称"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="导入类型：" style="width: 28%">
          <el-select v-model="filterForm.importType" placeholder="请选择类型">
            <el-option value="单条数据录入">单条数据录入</el-option>
            <el-option value="Shape文件导入">Shape文件导入</el-option>
            <el-option value="Excel文件导入">Excel文件导入</el-option>
            <el-option value="Geojson文件导入">Geojson文件导入</el-option>
          </el-select>
        </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="$store.state.tableHeight" 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="modelType" label="类型" width="120"/>
        <el-table-column prop="menuNameTwo" label="类别" width="120"/>
        <el-table-column prop="lon" label="位置" width="180">
          <template #default="scope">
            [
            <span v-if="scope.row.lon && scope.row.lon!=='' && scope.row.lat && scope.row.lat!==''">
              {{ scope.row.lon }},<br/> {{ scope.row.lat }}
            </span>
            ]
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地名地址库" width="150"/>
        <el-table-column prop="userName" label="修改人"/>
        <el-table-column prop="updateDate" label="修改时间" width="170">
          <template #default="scope">
            {{ $util.datetime.format(scope.row.updateDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="170">
          <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 v-if="auth"  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 v-if="auth"  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>

  <ModelDataDetail v-if="isDetailShow" :is-show="isDetailShow" :dialog-title="dialogTitle" :item="currRow" :curr-category="currCategory" :close="handleDetailShow"></ModelDataDetail>
</template>

<script>
import api from '@/api/data/ModelData'
import ModelDataDetail from "@/components/dataManage/dataDetail/ModelDataDetail";
import CategoryMenu from "@/components/dataManage/CategoryMenu";

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

      currCategory: {
        id: ''
      },

      isDetailShow: false,
    }
  },
  components: {
    ModelDataDetail,
    CategoryMenu,
  },
  created() {
    let userInfo = this.$store.state.userInfo;
    if (userInfo.userLevel<2
        || (userInfo.userLevel===2) && userInfo.serviceId.split(',').indexOf(this.$constant.serviceId)>-1 ) {
      this.auth = true;
    }
  },
  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)
    },
    "currCategory.id": function () {
      this.resetCategory();
      this.getData();
    }
  },
  methods: {
    handleLoading(flag) {
      let app = this;
      if (flag) {
        app.loading = true;
      } else {
        setTimeout(() => {
          app.loading = false;
        }, 500);
      }
    },
    resetCategory() {
      let auth = this.$data.auth;
      let currCategory = this.$data.currCategory;
      Object.assign(this.$data, this.$options.data());
      this.auth = auth;
      this.currCategory = currCategory;
    },
    getData() {
      let app = this;
      if (app.currCategory && (!app.currCategory.id || app.currCategory.id==='')) {
        return;
      }
      app.tableData = [];
      let params = {
        menuId: app.currCategory.id,
        page: app.pageInfo.page,
        pageSize: app.pageInfo.pageSize,
      }
      Object.assign(params, app.filterForm)
      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() {
      let app = this;
      this.pageInfo.pageSize = -1;
      setTimeout(function () {
        app.pageInfo.pageSize = 10;
      })
    },
    handleTableSelect(val) {
      this.selectedRows = val;
    },
    handleDetailShow(flag) {
      if (flag) {
        this.getData()
      }
      this.isDetailShow = false
    },
    // 录入数据
    addDataClick() {
      this.currRow = {};
      this.dialogTitle = '录入数据'
      this.isDetailShow = true;
    },
    // 批量删除数据
    batchDelete() {
      let app = this;
      if (!this.selectedRows || this.selectedRows.length===0) {
        app.$message({message:'请选择数据', type: 'warning'})
        return;
      }
      let ids = this.selectedRows.map(i=> {return i.id}).join(',');
      this.deleteData({id:ids})
    },
    // 查看详情
    viewData(item) {
      let app = this;
      this.dialogTitle = '数据详情'
      app.currRow = JSON.parse(JSON.stringify(item))
      if (app.currRow.menuId) {
        app.currRow.menuId = Number(app.currRow.menuId)
      }
      this.currRow.isDataView = true;
      app.isDetailShow = true
    },
    // 编辑数据
    editData(item) {
      let app = this;
      this.dialogTitle = '编辑数据'
      app.currRow = JSON.parse(JSON.stringify(item))
      if (app.currRow.menuId) {
        app.currRow.menuId = Number(app.currRow.menuId)
      }
      app.currRow.isEdit = true;
      app.isDetailShow = true
    },
    // 删除数据
    deleteData(item) {
      let app = this;
      app.$msgbox.confirm('确认要删除此条数据吗？').then(()=>{
        api.deleteData({modelId	: item.id}).then(res=>{
          if (res.code === 200) {
            app.getData();
            app.$message({message: '删除成功', type: 'success'});
          }
        })
      })
    },
  }
}
</script>

<style>

</style>