hi-ucs/back/src/views/modules/ability/IntegratedServices.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="searchData">{{
              $t("query")
          }}</el-button>
        </el-form-item>

        <el-form-item>
          <el-button v-if="$hasPermission('ability:bsabilityai:save')" type="primary" @click="addServe()">挂接</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 v-for="(item) in Object.keys(tableColumns)" :key="item" :prop="item" label="融合服务名称"
          header-align="center" align="center"></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="handleUpdate(scope.row)">{{ $t("update") }}</el-button>
            <el-button v-if="$hasPermission('ability:bsabilityai:delete')" type="text" size="small"
              @click="deleteRow(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>
          </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 v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="query" @closeModal="closeModal"
        :addOrUpdateVisible="addOrUpdateVisible" :modalType="modalType">
      </add-or-update>

    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./IntegratedServices-add";
import qs from "qs";
import { type } from "os";

export const tableColumns = {
  'name': '融合服务名称',
  'description': '融合服务描述',
  'provider': '服务商',
  'providerUser': '服务商联系人',
  'providerMobile': '服务商联系人电话',
  'applicationArea': '应用领域',
  'deptId': '所属部门',
  'deptUser': '部门联系人',
  'mobile': '部门联系人电话',
}

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      // 表格--列
      tableColumns: tableColumns,
      tableData: [],
      mixinViewModuleOptions: {
        getDataListURL: "/fuse/page",
        exportURL: "/ability/bsabilityai/export",
        deleteURL: "/fuse",
        getDataListIsPage: true,
        deleteIsBatch: false,
      },
      dataForm: {
        name: "",
        order: 'desc',
        orderField: 'create_date',
        type: '融合服务'
      },
      qp: false,
      modalType: 'add',
    };
  },
  components: {
    AddOrUpdate,
  },
  mounted() {
    window.addEventListener("resize", this.a);
    this.fullScreen();
  },
  methods: {
    deleteRow(id) {
      this.$http.delete('/fuse/delete', {
        data: [id]
      }).then(res => {
        console.log('删除成功', res)
        if (res.data.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.$message({
          message: '删除成功',
          type: "success",
          duration: 500,
          onClose: () => {
            this.query()
          },
        });
      }).catch(err => {
        this.$message.error(err);
      })
    },
    // 查询
    searchData() {
      this.query()
    },
    // 重置
    reset() {
      this.dataForm.name = "";
      this.query()
    },
    // 修改
    handleUpdate(val) {
      this.addOrUpdateVisible = true;
      this.modalType = 'update';
      const cloneVal = JSON.parse(JSON.stringify(val))
      this.$nextTick(() => {
        this.$refs.addOrUpdate.getDetail(cloneVal)
      })
    },
    // 挂接
    addServe() {
      this.addOrUpdateVisible = true
      this.modalType = 'add';
    },
    closeModal() {
      this.addOrUpdateVisible = false;
    },
    // 展示
    showDetail(val) {
      this.addOrUpdateVisible = true;
      this.modalType = 'display';
      const cloneVal = JSON.parse(JSON.stringify(val))
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm = cloneVal;
        this.$refs.addOrUpdate.getDisPlayData()
      })
    },
    showDocument(val) {
      console.log(val);
      window.open(
        window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type,
        "_blank"
      );
    },
    fullScreen() {
      if (window.outerHeight === screen.availHeight) {
        if (window.outerWidth === screen.availWidth) {
          console.log(
            "全屏1",
          );
          this.qp = false;
        } else {
          console.log(
            "不是全屏2",
          );
          this.qp = true;
        }
      } else {
        console.log(
          "不是全屏3",
        );
        this.qp = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-tooltip__popper {
  max-width: 50%;
}
</style>