邓洁 : 修改页面细节

2023-11-05 22:58:59 +08:00
parent 30ba4268be
commit f385a50542
27 changed files with 97 additions and 32 deletions
--- a/src/components/PopoverDelete.vue
+++ b/src/components/PopoverDelete.vue
@@ -9,7 +9,7 @@
      @cancel="handleCancel"
  >
    <template #reference>
-      <el-button type="text" size="mini">删除</el-button>
+      <el-button :type="btnType" size="mini" v-perm="perm" :disabled="isDisabled" :icon="btnIcon" :plain="isPlain">删除</el-button>
    </template>
  </el-popconfirm>
 </template>
@@ -17,17 +17,40 @@
 <script setup>
 const props = defineProps({
  name: {
+    type: Object,
+    default: null
+  },
+  btnType: {
    type: String,
-    default: ''
+    default: 'text'
  },
  type: {
    type: String,
    default: ''
-  }
+  },
+  btnIcon: {
+    type: String,
+    default: ''
+  },
+  perm: {
+    type: Array,
+    default: []
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  isPlain: {
+    type: Boolean,
+    default: false
+  },
 })
 const emit = defineEmits()
 const title = ref(`确认删除名称为 "${props.name}"  的${props.type}吗!`)
 const visible = ref(false)
+watch(()=>props.name,(newVal)=>{
+  title.value="确认删除名称为"+'"'+props.name+'"'+"的"+props.type+"吗!"
+})
 const handleCancel = () => {
  visible.value = false
 }
--- a/src/views/custom-query/data-adapter/index.vue
+++ b/src/views/custom-query/data-adapter/index.vue
@@ -30,8 +30,11 @@
  </el-form>
  <div class="query-btn">
    <el-button type="primary" v-perm="['query:adapter:add']" @click="handleAdd" :icon="Plus" plain>新增</el-button>
-    <el-button type="danger" v-perm="['query:adapter:del']" @click="handleDelete" :icon="Delete" plain :disabled="disabled">删除</el-button>
-    <el-button type="warning" v-perm="['query:adapter:export']" @click="handleExport" :icon="Download" plain>导出</el-button>
+    <popover-delete :name="adapterNameList" btn-type="danger" :type="'菜单'" :perm="['query:adapter:del']"
+                    :is-disabled="disabled" :is-plain="true" :btn-icon="Delete"
+                    @delete="handleDelete(adapterIds)"/>
+    <el-button type="warning" v-perm="['query:adapter:export']" @click="handleExport" :icon="Download" plain>导出
+    </el-button>
  </div>
  <div class="table">
    <el-table
@@ -58,14 +61,13 @@
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="text" size="mini" v-perm="['query:adapter:edit']"
-                     @click="handleEdit(scope.row.adapterId)" >编辑
+                     @click="handleEdit(scope.row.adapterId)">编辑
          </el-button>
          <el-button type="text" size="mini"
                     @click="handleDesign(scope.row)">设计
          </el-button>
-          <el-button type="text" size="mini" v-perm="['query:adapter:del']" @click="handleDelete(scope.row)"
-                    >删除
-          </el-button>
+          <popover-delete :name="scope.row.adapterName" :type="'适配器'" :perm="['query:adapter:del']"
+                          @delete="handleDelete(scope.row.adapterId)"/>
        </template>
      </el-table-column>
    </el-table>
@@ -73,7 +75,7 @@
  <paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
          :total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
  <el-dialog v-model="isVisited" :title="title" width="700px">
-    <el-form :model="form" ref="formInstance"  class="dialog-form">
+    <el-form :model="form" ref="formInstance" class="dialog-form">
      <el-row>
        <el-col :span="24">
          <el-form-item label="适配器名称" prop="adapterName">
@@ -82,7 +84,7 @@
        </el-col>
        <el-col :span="24">
          <el-form-item label="数据适配器代码类型" prop="type">
-            <el-select v-model="form.type" placeholder="请选择数据适配器代码类型"  clearable filterable>
+            <el-select v-model="form.type" placeholder="请选择数据适配器代码类型" clearable filterable>
              <el-option
                  v-for="item in cacheStore.getDict('data_adapter_type')"
                  :key="item.value"
@@ -94,7 +96,7 @@
        </el-col>
        <el-col :span="24">
          <el-form-item label="适配器来源" prop="source">
-            <el-select v-model="form.source" placeholder="请选择适配器来源"  clearable filterable>
+            <el-select v-model="form.source" placeholder="请选择适配器来源" clearable filterable>
              <el-option
                  v-for="item in cacheStore.getDict('data_adapter_source')"
                  :key="item.value"
@@ -118,12 +120,19 @@
 </template>

 <script setup>
-import { getDataAdapterList, getDataAdapterDetails, addDataAdapter, editDataAdapter, delDataAdapter } from "@/api/custom-query/adapter";
+import {
+  getDataAdapterList,
+  getDataAdapterDetails,
+  addDataAdapter,
+  editDataAdapter,
+  delDataAdapter
+} from "@/api/custom-query/adapter";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {Search, Refresh, Delete, Plus, Edit, Download} from '@element-plus/icons-vue'
 import Paging from "@/components/pagination/index.vue";
 import {useCacheStore} from "@/stores/cache";
 import {useRouter} from "vue-router";
+
 const router = useRouter()
 const cacheStore = useCacheStore()
 const queryParams = reactive({
@@ -139,19 +148,22 @@ const pageInfo = reactive({
 const list = ref([])
 const queryForm = ref([])
 const loading = ref(true)
+const disabled = ref(true)
 const total = ref()
 const title = ref('')
 const isVisited = ref(false)
 const form = ref()
 const formInstance = ref()
+const adapterIds = ref([])
+const adapterNameList = ref([])
 //获取数据
 const getList = async () => {
  let params = {
    ...queryParams,
    ...pageInfo
  }
+  loading.value = true
  getDataAdapterList(params).then(res => {
-    console.log(res)
    if (res.code === 1000) {
      list.value = res.data.rows
      total.value = res.data.total
@@ -174,7 +186,7 @@ const handleAdd = async () => {
  restFrom()
  title.value = "新增数据源适配器"
  isVisited.value = true
-  nextTick(()=>{
+  nextTick(() => {
    // 清空校验
    formInstance.value.clearValidate()
  })
@@ -187,7 +199,7 @@ const handleEdit = async (id) => {
      form.value = res.data
      title.value = "编辑数据源适配器"
      isVisited.value = true
-      nextTick(()=>{
+      nextTick(() => {
        // 清空校验
        formInstance.value.clearValidate()
      })
@@ -201,22 +213,26 @@ const handleDesign = (row) => {
  router.push({path: `/custom/query/data/adapter/design/${row.adapterId}`})
 }
 //删除
-const handleDelete = async (row) => {
-  ElMessageBox.confirm(`确认删除名称为${row.adapterName}的适配器吗?`, '系统提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    delDataAdapter(row.adapterId).then(res => {
-      if (res.code === 1000) {
-        ElMessage.success(res.msg)
-        getList()
-      } else {
-        ElMessage.error(res.msg)
-      }
-    })
+const handleDelete = async (adapterId) => {
+  delDataAdapter(adapterId).then(res => {
+    if (res.code === 1000) {
+      ElMessage.success(res.msg)
+      getList()
+    } else {
+      ElMessage.error(res.msg)
+    }
  })
 }
+//勾选table数据行事件
+const handleSelect = async (selection) => {
+  if (selection.length !== 0) {
+    disabled.value = false
+    adapterIds.value = selection.map(item => item.adapterId).join()
+    adapterNameList.value = selection.map(item => item.adapterName).join()
+  } else {
+    disabled.value = true
+  }
+}
 //取消
 const handleCancel = () => {
  restFrom()
--- a/src/views/custom-query/datamodel/index.vue
+++ b/src/views/custom-query/datamodel/index.vue
@@ -241,6 +241,7 @@ const getList = async () => {
    ...queryParams,
    ...pageInfo
  }
+  loading.value = true
  getDataSourceManageList(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows
--- a/src/views/custom-query/query-page/index.vue
+++ b/src/views/custom-query/query-page/index.vue
@@ -40,6 +40,7 @@ const pageInfo = reactive({


 const initPage = () => {
+  tableLoading.value = true
  getPageInfo(queryId,pageInfo).then(res=>{
    let data = res.data
    uniColumns.value = data.uniColumns
@@ -71,7 +72,6 @@ const getData = () => {
    }
  })
  getPageData(pageInfo,{list:queryData,queryId}).then(res=>{
-    console.log(res)
    let data = res.data
    tableData.value = data.rows
    total.value = data.total
--- a/src/views/custom-query/sql/index.vue
+++ b/src/views/custom-query/sql/index.vue
@@ -178,6 +178,7 @@ const getList = async () => {
    ...queryParams,
    ...pageInfo
  }
+  loading.value = true
  getSqlList(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows
--- a/src/views/custom-query/table-management/importTable.vue
+++ b/src/views/custom-query/table-management/importTable.vue
@@ -106,6 +106,7 @@ const searchTableSearch = async () => {
    params.startTime = date[0];
    params.endTime = date[1];
  }
+  loading.value = true
  getDynamicTableList(params).then(res => {
    console.log('searchTableSearch',res)
    if (res.code === 1000) {
--- a/src/views/custom-query/table-management/index.vue
+++ b/src/views/custom-query/table-management/index.vue
@@ -126,6 +126,7 @@ const getList = async () => {
    params.startTime = date[0];
    params.endTime = date[1];
  }
+  loading.value = true
  getTableInfo(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows
--- a/src/views/custom-query/topo/index.vue
+++ b/src/views/custom-query/topo/index.vue
@@ -179,6 +179,7 @@ const getList = async () => {
    ...queryParams,
    ...pageInfo
  }
+  loading.value = true
  getTopoList(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows
--- a/src/views/custom-query/topo/topologyDesign.vue
+++ b/src/views/custom-query/topo/topologyDesign.vue
@@ -163,6 +163,7 @@ const handleSubmit = async (instance) => {
 }

 const handlePreview = (json) => {
+  previewLoading.value = true
  previewTopo({
    queryId: params.queryId,
    topJson: json,
--- a/src/views/monitor/logininfor/index.vue
+++ b/src/views/monitor/logininfor/index.vue
@@ -138,6 +138,7 @@ const getList = async () => {
    params.startTime = date[0]
    params.endTime = date[1]
  }
+  loading.value = true
  getLoginLogList(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows
--- a/src/views/monitor/online/index.vue
+++ b/src/views/monitor/online/index.vue
@@ -71,6 +71,7 @@ const getList = async () => {
    ...queryParams,
    ...pageInfo
  }
+  loading.value = true
  getOnlineList(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows
--- a/src/views/monitor/operlog/index.vue
+++ b/src/views/monitor/operlog/index.vue
@@ -239,6 +239,7 @@ const getList = async () => {
    params.startTime = date[0];
    params.endTime = date[1];
  }
+  loading.value = true
  getOperateLog(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows;
--- a/src/views/rapid/gen/importTable.vue
+++ b/src/views/rapid/gen/importTable.vue
@@ -99,8 +99,8 @@ const searchTableSearch = async () => {
    pageNum: pageInfo.pageNum,
    pageSize: pageInfo.pageSize
  }
+  loading.value = true
  getDynamicTable(params).then(res => {
-    console.log(res)
    if (res.code === 1000) {
      list.value = res.data.rows
      total.value = res.data.total
--- a/src/views/rapid/gen/index.vue
+++ b/src/views/rapid/gen/index.vue
@@ -198,6 +198,7 @@ const getList = async () => {
    params.startTime = date[0]
    params.endTime = date[1]
  }
+  loading.value = true
  getTableList(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows
--- a/src/views/rapid/regular/index.vue
+++ b/src/views/rapid/regular/index.vue
@@ -173,6 +173,7 @@ const getList = async () => {
    ...queryParams,
    ...pageInfo
  }
+  loading.value = true
  getRegularList(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows
--- a/src/views/rapid/source/index.vue
+++ b/src/views/rapid/source/index.vue
@@ -223,6 +223,7 @@ const getList = async () => {
    ...queryParams,
    ...pageInfo
  }
+  loading.value = true
  getDataSourceList(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -171,6 +171,7 @@ const getList = async () => {
    ...queryParams,
    ...pageInfo
  }
+  loading.value = true
  getConfigList(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -178,6 +178,7 @@ const getEditOption = (deptId) => {
  });
 }
 const getList = async () => {
+  loading.value = true
  getDeptList(queryParams).then(res => {
    list.value = res.data
    loading.value = false
--- a/src/views/system/menu/DistributeRole.vue
+++ b/src/views/system/menu/DistributeRole.vue
@@ -188,6 +188,7 @@ const searchRole = async () => {
    ...queryParams,
    ...pageInfo
  };
+  loading.value = true
  getRoleInfoByMenuId(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows;
@@ -205,6 +206,7 @@ const getExcludeRole = async () => {
    ...query,
    ...pageInfo
  };
+  dialogLoading.value = true;
  getRoleExcludeMenuId(params).then(res => {
    if (res.code === 1000) {
      roleList.value = res.data.rows;
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -221,6 +221,7 @@ const getSelectIcon = (val) => {
 }

 const getList = async () => {
+  loading.value = true
  getMenuList(queryParams).then(res => {
    list.value = res.data
    loading.value = false
--- a/src/views/system/notice/inform/index.vue
+++ b/src/views/system/notice/inform/index.vue
@@ -101,6 +101,7 @@ const getList = async () => {
    ...queryParams,
    ...pageInfo
  };
+  loading.value = true
  getNotifyList(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows;
--- a/src/views/system/notice/publish/index.vue
+++ b/src/views/system/notice/publish/index.vue
@@ -322,6 +322,7 @@ const getList = async () => {
    ...queryParams,
    ...pageInfo
  };
+  loading.value = true
  getNoticeList(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows;
--- a/src/views/system/post/DistributeUser.vue
+++ b/src/views/system/post/DistributeUser.vue
@@ -174,6 +174,7 @@ const searchUser = async () => {
    ...queryParams,
    ...pageInfo
  };
+  loading.value = true
  getUserInfoByPostId(postId,params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows;
@@ -191,6 +192,7 @@ const getExcludeUser = async () => {
    ...query,
    ...pageInfo
  };
+  dialogLoading.value = true;
  getUserExcludePostId(postId,params).then(res => {
    if (res.code === 1000) {
      userList.value = res.data.rows;
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -135,6 +135,7 @@ const rules = reactive({
  // ]
 })
 const getList = async () => {
+  loading.value = true
  getPostList({
    ...queryParams,
    ...pageInfo
--- a/src/views/system/role/DistributeUser.vue
+++ b/src/views/system/role/DistributeUser.vue
@@ -173,6 +173,7 @@ const searchUser = async () => {
    ...queryParams,
    ...pageInfo
  };
+  loading.value = true
  getUserByRoleId(roleId,params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows;
@@ -190,6 +191,7 @@ const getExcludeUser = async () => {
    ...query,
    ...pageInfo
  };
+  dialogLoading.value = true;
  getUserExcludeRoleId(roleId,params).then(res => {
    if (res.code === 1000) {
      userList.value = res.data.rows;
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -274,6 +274,7 @@ const getList = async () => {
    params.startTime = date[0]
    params.endTime = date[1]
  }
+  loading.value = true
  getRoleList(params).then(res => {
    if (res.code === 1000) {
      res.data.rows = res.data.rows.sort((a, b) => {
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -375,6 +375,7 @@ const getList = async () => {
    params.startTime = date[0]
    params.endTime = date[1]
  }
+  loading.value = true
  getUserList(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows;