hi-ucs/back/src/views/modules/ability/bsabilityservice.vue

<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-ability__bsabilityai">
      <el-form :inline="true" :model="dataForm">
        <el-form-item>
          <el-input
            v-model="dataForm.name"
            placeholder="名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList2(dataForm.name)">{{
            $t("query")
          }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="exportHandle()">{{
            $t("export")
          }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="$hasPermission('ability:bsabilityai:save')"
            type="primary"
            @click="addOrUpdateHandleServe()"
            >挂接</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="$hasPermission('ability:bsabilityai:delete')"
            type="danger"
            @click="deleteHandle2()"
            >{{ $t("deleteBatch") }}</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
        style="width: 100%"
        :height="qp ? '810px' : '650px'"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="应用名称"
          header-align="center"
          align="center"
        ></el-table-column>

        <el-table-column
          v-for="(item, index) in dataList[0].infoList"
          :key="index"
          :label="item.attrType"
          header-align="center"
          align="center"
          show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ findValue(scope.row.infoList, item.attrType) }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('handle')"
          fixed="right"
          header-align="center"
          align="center"
          width="94"
          right="0"
        >
          <template slot-scope="scope">
            <el-button
              v-if="$hasPermission('ability:bsabilityai:update')"
              type="text"
              size="small"
              @click="UpdateHandle(scope.row)"
              >{{ $t("update") }}</el-button
            >
            <el-button
              v-if="$hasPermission('ability:bsabilityai:delete')"
              type="text"
              size="small"
              @click="deleteHandle2(scope.row.id)"
              >{{ $t("delete") }}</el-button
            >
            <el-button type="text" size="small" @click="showDetail(scope.row)"
              >展示</el-button
            >
            <el-button type="text" size="small" @click="showDocument(scope.row)"
              >开发文档</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="applyAndAssembly(scope.row)"
              >应用与组件</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="applyAndDataResource(scope.row)"
              >应用与数据资源</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="applyAndProject(scope.row)"
              >应用与项目</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="applyAndInfrastructure(scope.row)"
              >应用与基础设施</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="Number(total)"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      >
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update
        :disabled="disabled"
        v-if="addOrUpdateVisible"
        ref="addOrUpdate"
        @refreshDataList="getDataList"
      ></add-or-update>
      <relate-application
        v-if="relateApplicationResourceVisible"
        ref="relateApplication"
        :relateInfo="relationData"
        @isShowRelatePopup="handleIsShowRelatePopupApply"
      ></relate-application>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./bsabilityservice-add-or-update";
import dictionaries from "@/utils/dictionaries";
import RelateApplication from "./bsabilityai-relate-application.vue";
import qs from "qs";
import { type } from "os";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/resource/page",
        getDataListIsPage: true,
        exportURL: "/ability/bsabilityai/export",
        deleteURL: "/resource/delete",
        deleteIsBatch: true,
      },
      disabled: false,
      sceneArr: dictionaries.sceneArr,
      fieldArr: dictionaries.fieldArr,
      shareFormArr: dictionaries.shareFormArr,
      dataForm: {
        name: "",
        creator: "",
        selectType: 0,
        delFlag: 0,
        type: "应用资源",
      },
      qp: false,
      relateApplicationResourceVisible: false,
      relationData: {}, //打开穿梭框时传递的参数
    };
  },
  watch: {},
  components: {
    AddOrUpdate,
    RelateApplication,
  },
  created() {
    this.dataForm.name = "";
    this.dataForm.type = "应用资源";
  },
  mounted() {
    window.addEventListener("resize", this.a);
    this.fullScreen();
  },
  methods: {
    reset() {
      this.$http
        .get(
          this.mixinViewModuleOptions.getDataListURL +
            "?" +
            qs.stringify({
              // order: this.order,
              // orderField: this.orderField,
              // type: '组件服务',
              page: 1,
              selectType: 0,
              limit: 10,
              delFlag: 0,
              creator: "",
              type: "应用资源",
              name: "",
            })
        )
        .then(({ data: res }) => {
          this.dataForm.name = "";
          if (res.code !== 0) {
            this.dataList = [];
            this.total = 0;
            return this.$message.error(res.msg);
          }
          this.dataList = this.mixinViewModuleOptions.getDataListIsPage
            ? res.data.list
            : res.data;
          this.total = this.mixinViewModuleOptions.getDataListIsPage
            ? res.data.total
            : 0;
          if (this.mixinViewModuleOptions.requestCallback) {
            this.mixinViewModuleOptions.requestCallback(res.data);
          }
          this.dataListLoading = false;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
    showDetail(val) {
      this.addOrUpdateVisible = true;
      this.disabled = false;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.UpdateState = false;
        this.$refs.addOrUpdate.dataFormShowDetails = val;
        this.$refs.addOrUpdate.init();
      });
      this.disabled = true;
    },
    showDocument(val) {
      console.log(val);
      window.open(
        window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type,
        "_blank"
      );
    },
    findValue(list, type) {
      const found = list.find((item) => item.attrType === type);
      if (found) {
        return found.attrValue;
      } else {
        return "暂无数据";
      }
    },
    getDataList2(names) {
      if (names != null) {
        this.$http
          .get(
            this.mixinViewModuleOptions.getDataListURL +
              "?" +
              qs.stringify({
                // order: this.order,
                // orderField: this.orderField,
                // type: '组件服务',
                pageNum: 1,
                pageSize: this.limit,
                type: "应用资源",
                creator: "",
                selectType: 0,
                delFlag: 0,
                name: names,
              })
          )
          .then(({ data: res }) => {
            if (res.code !== 0) {
              this.dataList = [];
              this.total = 0;
              return this.$message.error(res.msg);
            }
            if (res.data.list.length !== 0) {
              this.dataList = res.data.list;
              this.total = this.mixinViewModuleOptions.getDataListIsPage
                ? res.data.total
                : 0;
              if (this.mixinViewModuleOptions.requestCallback) {
                this.mixinViewModuleOptions.requestCallback(res.data);
              }
              this.dataListLoading = false;
            } else {
              this.$message.error("未查询到相关信息");
              this.reset();
            }
          })
          .catch(() => {
            this.dataListLoading = false;
          });
      } else {
        this.$message.error("查询不能输入为空");
      }
    },
    fullScreen() {
      if (window.outerHeight === screen.availHeight) {
        if (window.outerWidth === screen.availWidth) {
          console.log(
            "全屏1",
            window.outerHeight,
            screen.availHeight,
            window.outerWidth,
            screen.availWidth
          );
          this.qp = false;
        } else {
          console.log(
            "不是全屏2",
            window.outerHeight,
            screen.availHeight,
            window.outerWidth,
            screen.availWidth
          );
          this.qp = true;
        }
      } else {
        console.log(
          "不是全屏3",
          window.outerHeight,
          screen.availHeight,
          window.outerWidth,
          screen.availWidth
        );
        this.qp = true;
      }
    },
    //应用与组件
    applyAndAssembly(val) {
      console.log("vvvv", val);
      //根据id和类型查询已关联的组件，将id,type和查出来的数据传递给组件
      let type = "组件服务";
      let id = val.id;
      this.$http
        .get(`/dataResourceRel/queryResourceRelByKeyId`, {
          params: {
            keyId: id,
            type: type,
            referenceName: "",
          },
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          console.log("rrrrressssz", res.data);
          this.relateApplicationResourceVisible = true;
          this.relationData = {
            id: id,
            linkType: "1",
            responseData: res.data,
          };
          console.log(" this.relationData", this.relationData);
          //将数据传递给引入的组件
        });
    },
    //应用与数据资源
    applyAndDataResource(val) {
      console.log("数据资源");
    },
    //应用与项目
    applyAndProject(val) {
      let type = "项目";
      let id = val.id;
      this.$http
        .get(`/dataResourceRel/queryResourceRelByKeyId`, {
          params: {
            keyId: id,
            type: type,
            referenceName: "",
          },
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          console.log("rrrrressssx", res.data);
          this.relateApplicationResourceVisible = true;
          this.relationData = {
            id: id,
            linkType: "1",
            responseData: res.data,
          };
          //将数据传递给引入的组件
        });
    },
    //应用与基础设施
    applyAndInfrastructure(val) {
      let type = "基础设施";
      let id = val.id;
      this.$http
        .get(`/dataResourceRel/queryResourceRelByKeyId`, {
          params: {
            keyId: id,
            type: type,
            referenceName: "",
          },
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          console.log("rrrrressssj", res.data);
          this.relateApplicationResourceVisible = true;
          this.relationData = {
            id: id,
            linkType: "1",
            responseData: res.data,
          };
          //将数据传递给引入的组件
        });
    },
    // 是否展示关联应用弹窗
    handleIsShowRelatePopupApply(type) {
      this.relateApplicationResourceVisible = type;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-tooltip__popper {
  max-width: 50%;
}
</style>