panel done

2022/aiot-evaluate/src/components/button-group/index.vue

@@ -1,6 +1,6 @@
<template>
    <el-button
      :class="{line: btn.isLine}"
      :class="{line: btn.attrs.isLine}"
      v-for="btn in btns"
      :key="btn.name"
      v-bind="btn.attrs"
@@ -14,7 +14,7 @@
</template>
<script setup>
import { defineProps } from 'vue';
import { defineProps, provide } from 'vue';
defineProps({
  btns: {
    type: Array,

2022/aiot-evaluate/src/components/panel/index.vue

@@ -1,67 +1,88 @@
<template>
  <div class="ipu-panel">
    <el-main>
      <div class="ipu-panel-header">
        <div class="ipu-panel-title">
          {{ title }}
        </div>
        <div class="ipu-panel-slot-left">
          <slot name="slot-left"><div></div></slot>
        </div>
        <div class="ipu-panel-slot-right">
          <slot name="slot-right"><div></div></slot>
        </div>
      </div>
      <slot></slot>
    </el-main>
  </div>
</template>
<script setup>
import { defineProps } from 'vue';
defineProps({
  title: {
    type: String,
    default: () => ''
  }
});
</script>
<style scoped lang="scss">
.ipu-panel-main {
  width: 100%;
  height: 100%;
  background-color: #eee;
  padding: 15px;
 }
.ipu-panel-header {
  width: 100%;
  height: 52px;
  background-color: #fff;
  padding: 10px 17px;
  display: flex;
  align-items: center;
  .ipu-panel-title {
    width: 20%;
    font-size: 14px;
    font-weight: 500;
    opacity: 85%;
    line-height: 22px;
    color: rgba(0, 0, 0, 1);
  }
  .ipu-panel-slot-left,
  .ipu-panel-slot-right {
    display: flex;
    align-items: center;
  }
  .ipu-panel-slot-left {
    justify-content: flex-start;
    width: 40%;
  }
  .ipu-panel-slot-right {
    width: 40%;
    justify-content: flex-end;
  }
}
</style>
<template>
  <div :class="[isCollapse ? 'ipu-panel-collapse' : 'ipu-panel']">
    <el-main>
      <div class="ipu-panel-header">
        <div class="ipu-panel-title">
          {{title}}
        </div>
        <div class="ipu-panel-slot-left">
          <slot name="slot-left"><div></div></slot>
        </div>
        <div class="ipu-panel-slot-right">
            <slot name="slot-right"><div></div></slot>
        </div>
      </div>
      <slot></slot>
    </el-main>
  </div>
</template>
<script setup>
import { defineProps, ref, onMounted } from 'vue';
defineProps({
  title: {
    type: String,
    default: () => ''
  }
});
const isCollapse = ref(false);
window.addEventListener('setItemEvent', (e) => {
  if (e.key === 'isCollapse') {
    if (e.newValue === true) {
      isCollapse.value = true;
    } else {
      isCollapse.value = false;
    }
   }
  console.log(isCollapse.value, '@@@');
});
onMounted(() => {
});
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/index.scss";
  .ipu-panel {
    width: calc(100vw - $slidebar-width);
    height: calc(100vh - $header-height - $tag-height);
    background-color: #eee;
    padding: 10px;
    border-radius: 6px;
    overflow: hidden;
  }
  .ipu-panel-collapse {
    width: calc(100vw - $siderbar-collapse-width);
    height: calc(100vh - $header-height - $tag-height);
    background-color: #eee;
    padding: 10px;
    border-radius: 6px;
    overflow: hidden;
  }
  .ipu-panel-header{
    width: 100%;
    height: 52px;
    background-color: #fff;
    padding: 10px 17px;
    display: flex;
    align-items: center;
    .ipu-panel-title{
      width: 20%;
      font-size: 14px;
      font-weight: 500;
      opacity: 85%;
      line-height: 22px;
      color: rgba(0,0,0,1);
    }
    .ipu-panel-slot-left,.ipu-panel-slot-right{
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .ipu-panel-slot-left{
      width: 40%;
    }
    .ipu-panel-slot-right{
      width: 40%;
    }
  }
</style>

2022/aiot-evaluate/src/main.js

@@ -14,6 +14,9 @@ import { setGlobalApiProperties } from './api/index.js';
import { setupGlobalComponents } from './components';
// 引入监视localStorage的方法
import tool from './utils/tool';
const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
@@ -26,6 +29,9 @@ setGlobalProperties(app);
// 全局api
setGlobalApiProperties(app);
// 注册全局插件
app.use(tool);
app.use(ElementPlus, {
  locale: zhCn
});

2022/aiot-evaluate/src/utils/tool.js

@@ -0,0 +1,9 @@
function dispatchEventStorage() {
  localStorage.setItem = function(key, val) {
    const setEvent = new Event('setItemEvent');
    setEvent.key = key;
    setEvent.newValue = val;
    window.dispatchEvent(setEvent);
  };
}
export default dispatchEventStorage;

2022/aiot-evaluate/src/views/settings/ApiResourceManagement.vue

@@ -1,20 +1,16 @@
<template>
  <!-- 表格 -->
  <ipu-table-module
    @search="search"
    @clearSearch="clearSearch"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange"
    :pageData="pageData"
  ></ipu-table-module>
  <ipu-table-module @search="search"
                    @clearSearch="clearSearch"
                    @handleSizeChange="handleSizeChange"
                    @handleCurrentChange="handleCurrentChange"
                    :pageData="pageData"></ipu-table-module>
  <!-- 弹窗 -->
  <ipu-dialog
    :dialogData="dialogData"
    @changeEvent="changeEvent"
    @blurEvent="blurEvent"
    :before-close="cancelDialog"
  ></ipu-dialog>
  <ipu-dialog :dialogData="dialogData"
              @changeEvent="changeEvent"
              @blurEvent="blurEvent"
              :before-close="cancelDialog"></ipu-dialog>
</template>
<script setup>
@@ -235,7 +231,16 @@ const dialogData = ref({
// 搜索
const search = (data) => {
  queryByType({ type: 1 });
  const params = {
    ...data,
    clientId: pageData.value.tableData[0].clientId
  };
  console.log(data);
  console.log(params);
  // console.log(pageData.value.tableData[0].clientId);
  // console.log(pageData.value.page.size);
  getPermissionData(params);
  // queryByType({ type: 1 });
  console.log('开始搜索');
};
// 清除搜索
@@ -278,7 +283,7 @@ const createPermission = async (params) => {
};
// 更新API资源
const changePermission = async(params) => {
const changePermission = async (params) => {
  await proxy
    .$reqPost(proxy.$api.managementPermissionApi.updatePermission, params)
    .then((res) => {
@@ -294,7 +299,7 @@ const changePermission = async(params) => {
};
// 删除API资源
const deletePermission = async(code) => {
const deletePermission = async (code) => {
  await proxy
    .$reqPost(`${proxy.$api.managementPermissionApi.deletePermission}?code=${code}`)
    .then((res) => {
@@ -322,7 +327,7 @@ const queryByType = async (param) => {
};
// 新建按钮
function addApi() {
function addApi () {
  dialogData.value.drawerData.isOpen = true;
  dialogData.value.drawerData.title = '新建API资源';
  dialogData.value.forms.map((item) => {
@@ -331,7 +336,7 @@ function addApi() {
}
// 编辑按钮
function editRow(row) {
function editRow (row) {
  dialogData.value.drawerData.title = '编辑API资源';
  dialogData.value.drawerData.isOpen = true;
  console.log(row);
@@ -359,7 +364,7 @@ function editRow(row) {
}
// 删除按钮;
function deleteRow(row) {
function deleteRow (row) {
  console.log(row);
  ElMessageBox.confirm(
@@ -370,24 +375,24 @@ function deleteRow(row) {
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
    ElMessage({
      type: 'success',
      message: 'Delete completed'
      ElMessage({
        type: 'success',
        message: 'Delete completed'
      });
      deletePermission(row.roleCode);
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled'
      });
    });
    deletePermission(row.roleCode);
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: 'Delete canceled'
    });
  });
}
function cancelDialog() {
function cancelDialog () {
  dialogData.value.drawerData.isOpen = false;
}
function confirmDialog(value) {
function confirmDialog (value) {
  if (dialogData.value.drawerData.title === '新建API资源') {
    createPermission(value);
  } else if (dialogData.value.drawerData.title === '编辑API资源') {

2022/aiot-evaluate/src/views/settings/ApplicationManagement.vue

@@ -1,20 +1,16 @@
<template>
  <!-- 表格 -->
  <ipu-table-module
    @search="search"
    @clearSearch="clearSearch"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange"
    :pageData="pageData"
  ></ipu-table-module>
  <ipu-table-module @search="search"
                    @clearSearch="clearSearch"
                    @handleSizeChange="handleSizeChange"
                    @handleCurrentChange="handleCurrentChange"
                    :pageData="pageData"></ipu-table-module>
  <!-- 弹窗 -->
  <ipu-dialog
    :dialogData="dialogData"
    @changeEvent="changeEvent"
    @blurEvent="blurEvent"
    :before-close="cancelDialog"
  ></ipu-dialog>
  <ipu-dialog :dialogData="dialogData"
              @changeEvent="changeEvent"
              @blurEvent="blurEvent"
              :before-close="cancelDialog"></ipu-dialog>
</template>
<script setup>
@@ -48,7 +44,7 @@ const pageData = ref({
      clearable: true
    },
    rules: [{
    // required: true,
      // required: true,
      message: 'Please input client name',
      trigger: 'blur'
    },
@@ -212,7 +208,12 @@ const dialogData = ref({
// -----查询应用-------
// 搜索
const search = (data) => {
  listClientPage(data);
  const params = {
    ...data,
    page: pageData.value.page.num,
    size: pageData.value.page.size
  };
  listClientPage(params);
  console.log(data);
  console.log('开始搜索');
};
@@ -279,7 +280,7 @@ const createClient = async (params) => {
};
// 更新应用
const changeClient = async(params) => {
const changeClient = async (params) => {
  await proxy
    .$reqPost(proxy.$api.managementApi.updateByClientId, params)
    .then((res) => {
@@ -295,7 +296,7 @@ const changeClient = async(params) => {
};
// 删除应用
const deleteClient = async(clientId) => {
const deleteClient = async (clientId) => {
  await proxy
    .$reqPost(`${proxy.$api.managementApi.deleteByClientId}?clientId=${clientId}`)
    .then((res) => {
@@ -314,8 +315,8 @@ const listClientPage = async (params) => {
  await proxy
    .$reqGetParam(proxy.$api.managementApi.listPage, params)
    .then((res) => {
      console.log('应用数据：', res.data.data);
      pageData.value.tableData = res.data.data;
      console.log(res);
      pageData.value.tableData = res.data.data.records;
    })
    .catch((err) => {
      console.log(err);
@@ -323,7 +324,7 @@ const listClientPage = async (params) => {
};
// 新建按钮
function addClient() {
function addClient () {
  dialogData.value.drawerData.isOpen = true;
  dialogData.value.drawerData.title = '新建应用';
  dialogData.value.forms.map((item) => {
@@ -332,7 +333,7 @@ function addClient() {
}
// 编辑按钮
function editRow(row) {
function editRow (row) {
  dialogData.value.drawerData.title = '编辑应用';
  dialogData.value.drawerData.isOpen = true;
  // console.log(row);
@@ -353,7 +354,7 @@ function editRow(row) {
}
// 删除按钮
function deleteRow(row) {
function deleteRow (row) {
  console.log(row);
  ElMessageBox.confirm(
    `确定要删除${row.clientName}吗`,
@@ -363,25 +364,25 @@ function deleteRow(row) {
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
    ElMessage({
      type: 'success',
      message: 'Delete completed'
    });
    deleteClient(row.clientId);
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: 'Delete canceled'
      ElMessage({
        type: 'success',
        message: 'Delete completed'
      });
      deleteClient(row.clientId);
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled'
      });
    });
  });
}
// 弹出框取消
function cancelDialog() {
function cancelDialog () {
  dialogData.value.drawerData.isOpen = false;
}
// 弹出框确认
function confirmDialog(value) {
function confirmDialog (value) {
  if (dialogData.value.drawerData.title === '新建应用') {
    createClient(value);
  } else {

2022/aiot-evaluate/src/views/settings/RoleManagement.vue

@@ -1,26 +1,21 @@
<template>
  <!-- 表格 -->
  <ipu-table-module
    @search="search"
    @clearSearch="clearSearch"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange"
    :pageData="pageData"
  ></ipu-table-module>
  <ipu-table-module @search="search"
                    @clearSearch="clearSearch"
                    @handleSizeChange="handleSizeChange"
                    @handleCurrentChange="handleCurrentChange"
                    :pageData="pageData"></ipu-table-module>
  <!-- 弹窗 -->
  <ipu-dialog
    :dialogData="dialogData"
    @changeEvent="changeEvent"
    @blurEvent="blurEvent"
    :before-close="cancelDialog"
  ></ipu-dialog>
  <ipu-dialog :dialogData="dialogData"
              @changeEvent="changeEvent"
              @blurEvent="blurEvent"
              :before-close="cancelDialog"></ipu-dialog>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
// --------页面表单数据----------
const pageData = ref({
  title: '角色管理',
@@ -342,9 +337,9 @@ const listRolePage = async (params) => {
  await proxy
    .$reqGetParam(proxy.$api.managementRoleApi.listPage, params)
    .then((res) => {
      console.log(res.data.data);
      pageData.value.tableData = res.data.data;
      pageData.value.page.total = res.data.total;
      console.log(res.data.data.records);
      pageData.value.tableData = res.data.data.records;
      pageData.value.page.total = res.data.total.records;
    })
    .catch((err) => {
      console.log(err);
@@ -352,7 +347,7 @@ const listRolePage = async (params) => {
};
// search();
// 新建按钮
function addRole() {
function addRole () {
  dialogData.value.drawerData.isOpen = true;
  dialogData.value.drawerData.title = '新建角色';
  dialogData.value.forms.map((item) => {
@@ -364,7 +359,7 @@ function addRole() {
}
// 编辑按钮
function editRow(row) {
function editRow (row) {
  dialogData.value.drawerData.isOpen = true;
  dialogData.value.drawerData.title = '编辑角色';
  // console.log(row);
@@ -387,7 +382,7 @@ function editRow(row) {
}
// 删除按钮
function deleteRow(row) {
function deleteRow (row) {
  console.log(row);
  ElMessageBox.confirm(`确定要删除${row.roleName}吗`, '删除后将无法还原!', {
@@ -411,12 +406,12 @@ function deleteRow(row) {
}
// 取消
function cancelDialog() {
function cancelDialog () {
  dialogData.value.drawerData.isOpen = false;
}
// 确认
function confirmDialog(value) {
function confirmDialog (value) {
  if (dialogData.value.drawerData.title === '新建角色') {
    createRole(value);
  } else {
@@ -436,5 +431,5 @@ const blurEvent = (form) => {
</script>
<style lang="scss" scoped>
@import '@/assets/styles/index.scss';
@import "@/assets/styles/index.scss";
</style>