hi-ucs/back/src/views/modules/ability/bsabilityai.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 type="primary" @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="addOrUpdateHandleAI()"
            >挂接</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"
        v-if="dataList[0].infoList"
        :data="dataList"
        :height="qp ? '650px' : '650px'"
        border
        @selection-change="dataListSelectionChangeHandle"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        ></el-table-column>
        <af-table-column
          prop="name"
          label="组件名称"
          header-align="center"
          align="center"
        ></af-table-column>
        <af-table-column
          v-for="(item, index) in dataList[0].infoList"
          :key="index"
          :label="item.attrType"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            {{ findValue(scope.row.infoList, item.attrType) }}
          </template>
        </af-table-column>
        <el-table-column
          :label="$t('handle')"
          fixed="right"
          header-align="center"
          align="center"
          width="150"
        >
          <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="showRelateApplication(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="relateApplicationVisible" ref="relateApplication" :relateInfo="relateInfo" @isShowRelatePopup="handleIsShowRelatePopup"></relate-application>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./bsabilityai-add-or-update";
import dictionaries from "@/utils/dictionaries";
import qs from "qs";
import RelateApplication from "./bsabilityai-relate-application.vue"
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: "",
        delFlag: 0,
        selectType: 0,
        type: "组件服务",
      },
      qp: false,
      // 关联应用弹窗
      relateApplicationVisible: false,
      relateInfo: {
        id: '',
        responseData: {},
        linkType: ''
      }
    };
  },
  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,
              limit: 10,
              creator: "",
              selectType: 0,
              delFlag: 0,
              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;
        });
    },
    findValue(list, type) {
      const found = list.find((item) => item.attrType === type);
      if (found) {
        return found.attrValue;
      } else {
        return "暂无数据";
      }
    },
    showDetail(val) {
      // this.addOrUpdateHandle(id)
      this.addOrUpdateVisible = true;
      this.disabled = false;
      console.log("显示数据=============》", val);
      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"
      );
    },
    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 }) => {
            console.log("res", 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;
      }
    },
    // 点击关联应用按钮
    showRelateApplication(row){
      this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
        if( res && res.data ) {
          this.relateApplicationVisible = true;
          this.relateInfo = {
            id: row.id,
            responseData: res.data,
            linkType: '2'
          };
        }
      }).catch(() => { })
    },
    // 是否展示关联应用弹窗
    handleIsShowRelatePopup(type) {
      this.relateApplicationVisible = type;
    }
  },
};
</script>
<style lang="scss" scoped>
.el-tooltip__popper {
  max-width: 50%;
}
</style>