kd-aiot-frontend/src/views/system/unifiedPortal/index.vue

<template>
  <div id="unifiedPortalIndex">
    <div class="content_box">
      <el-card class="box-card">
        <div class="control_bar">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="add"
            v-if="$hasPermission('sys:system:save')"
            >新增</el-button
          >
        </div>
        <div class="list">
          <div class="list_box">
            <template v-for="(item, index) in list">
              <div
                :class="[
                  (index + 1) % 6 == 0 ? 'list-item margin_0' : 'list-item'
                ]"
              >
                <el-card>
                  <div slot="header" class="clearfix">
                    <span>{{ item.name }}</span>
                    <i
                      class="el-icon-delete"
                      @click="deleted(item)"
                      v-if="$hasPermission('mian:codeManage:delete')"
                    ></i>
                    <i
                      class="el-icon-edit"
                      @click="edit(item)"
                      v-if="$hasPermission('mian:codeManage:update')"
                    ></i>
                  </div>
                  <div class="card-content">
                    <el-image
                      class="img"
                      :src="item.img"
                      fit="cover"
                      :preview-src-list="[item.img]"
                    >
                    </el-image>
                    <div class="item">
                      <span>排序</span>
                      <span>{{ item.sort }}</span>
                    </div>
                    <div class="item">
                      <span>链接</span>
                      <span>{{ item.linkUrl }}</span>
                    </div>
                    <div class="item">
                      <span>链接类型</span>
                      <span>{{ item.linkTypeName }}</span>
                    </div>
                    <div class="item">
                      <span>架构类型</span>
                      <span>{{ item.architTypeName }}</span>
                    </div>
                    <div class="item">
                      <span>备注</span>
                      <span>{{ item.remark }}</span>
                    </div>
                  </div>
                </el-card>
              </div>
            </template>
          </div>
        </div>
      </el-card>
    </div>
    <Dialog ref="dialogRef" @reload="getPages"></Dialog>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import Dialog from './dialog.vue';
  import { getList, deleteInfo } from '@/api/system/unifiedPortal/index.js';
  import { getImageUrl } from '@/utils/file';
  export default {
    mixins: [dictMixins],
    components: { Dialog },
    data() {
      return {
        type: '新增',
        list: []
      };
    },
    created() {
      this.getPages();
      this.requestDict('链接分类');
      this.requestDict('架构分类');
    },
    methods: {
      async getPages() {
        let data = await getList({ pageNum: 1, size: 9999 });
        this.list = data.list.map((item) => {
          return {
            ...item,
            architTypeName:
              this.getDictValue('架构分类', String(item.architType)) || '',
            linkTypeName:
              this.getDictValue('链接分类', String(item.linkType)) || '',
            img:
              window.location.origin +
              '/api/main/file/getFile?objectName=' +
              item.iconPath
          };
        });
      },
      add() {
        this.type = '新增';
        this.$refs.dialogRef.open(this.type);
      },
      edit(item) {
        this.type = '编辑';
        this.$refs.dialogRef.open(this.type, item.id);
      },
      deleted(item) {
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            await deleteInfo([item.id]);
            this.$message.success('删除成功');
            await this.getPages();
          } catch (error) {
            console.log(error);
            this.$message.error('删除失败');
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  #unifiedPortalIndex {
    height: calc(100vh - 97px);
    width: 100%;
    .content_box {
      width: 100%;
      height: 100%;
      padding: 20px;
      box-sizing: border-box;
      :deep(.el-card) {
        height: 100%;
        width: 100%;
        .el-card__header {
          width: 100%;
          .clearfix {
            display: flex;
            justify-content: center;
            align-items: center;
            > span {
              flex: 1;
            }
            .el-icon-delete {
              color: red;
              cursor: pointer;
              margin-right: 5px;
            }
            .el-icon-edit {
              color: #40a9ff;
              cursor: pointer;
            }
          }
        }
        .el-card__body {
          height: 100%;
          width: 100%;
          display: flex;
          flex-direction: column;
          .control_bar {
            height: 60px;
            border: 10px;
            padding: 0 20px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            border-bottom: 2px solid #ebeef5;
            margin-bottom: 20px;
          }
          .list {
            flex: 1 0 auto;
            height: 0;
            .list_box {
              height: 100%;
              width: 100%;
              padding: 10px;
              box-sizing: border-box;
              overflow: auto;
              .list-item {
                width: 15%;
                margin-right: 2%;
                margin-bottom: 10px;
                display: inline-block;
                .el-card__body {
                  display: flex;
                  flex-direction: column;
                  font-size: 12px;
                  .img {
                    width: 100%;
                    height: 150px;
                  }
                  .item {
                    padding: 5px 0;
                    display: flex;
                    > span:first-child {
                      margin-right: 10px;
                    }
                  }
                }
              }
              .margin_0 {
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  }
</style>