diantou/src_product/iam/audit/dataUphold/audit-data-list.vue

<template>
  <div :class="[$style.wrapHeight, $style.dataclass]">
    <div :class="$style.rowHeight">
      <div :class="$style.rowLeft">
        <audit-class-tree
          ref="auditMaintainCatalogTree"
          show-line
          top-node-text="数据分类维护"
          :is-select-dep="true"
          :draggable="true"
          :cate="true"
          :is-select="true"
          @treeSelect="treeSelect"
        ></audit-class-tree>
      </div>
      <div :class="$style.rightcard">
        <a-card>
          <!-- 高级搜索组件 -->
          <audit-advanced-query
            :expand="expand"
            :search-data="formData"
            :ref-name="searchform"
            :search-style="{ height: '150px', left: '20px', top: '57px' }"
            :search-fun="handleSearch"
            @searchedClick="searchedClick"
          >
            <template>
              <a-col :span="12">
                <a-form-model-item :label="'分类编号'" prop="categoryId">
                  <a-input v-model="formData.categoryId" allow-clear />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item :label="'分类名称'" prop="categoryName">
                  <a-input v-model="formData.categoryName" allow-clear />
                </a-form-model-item>
              </a-col>
            </template>
          </audit-advanced-query>
          <SdDataTable
            :key="key"
            ref="dataTable"
            :projectlist="true"
            :editnode="editnode"
            form-id="iamDataCategoryQueryList"
            data-url="api/xcoa-mobile/v1/iamdatacategory/iamDataCategoryQueryList"
            :columns="columns"
            :actions="actions"
            :filter-expressions="expressions"
            :search-fields="['categoryId', 'categoryName']"
            :show-advance-query="true"
            @searchbtnClick="searchbtnClick"
          >
            <template slot="categoryName" slot-scope="text, record">
              <a v-if="showNameStatue(record)" @click="dataDetail(record)">{{ text }}</a>
              <span v-else :class="$style.invalid">{{ text }}</span>
            </template>
          </SdDataTable>
        </a-card>
      </div>

      <a-modal
        :title="detailInfo.categoryName ? detailInfo.categoryName : ''"
        :visible="detailShow"
        @cancel="detailShow = false"
      >
        <a-form-model :model="detailInfo" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
          <a-form-model-item :label="'分类名称'">
            <a-input v-model="detailInfo.categoryName" disabled />
          </a-form-model-item>
          <a-form-model-item :label="'分类编号'">
            <a-input v-model="detailInfo.categoryId" disabled />
          </a-form-model-item>
          <a-form-model-item :label="'分类描述'">
            <a-input v-model="detailInfo.categoryDesc" disabled />
          </a-form-model-item>
          <a-form-model-item :label="'权重'">
            <a-input v-model="detailInfo.weightNum" disabled />
          </a-form-model-item>
          <a-form-model-item :label="'排序'">
            <a-input v-model="detailInfo.sortNum" disabled />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { Modal, message } from 'ant-design-vue'
import axios from '@/common/services/axios-instance'
import auditClassTree from './audit-class-tree.vue'
import auditAdvancedQuery from '../../components/audit-advanced-query.vue'
import auditAdvancedQueryMixins from '../../components/audit-advanced-query-mixins'
import auditAdvancedGroupMixins from '../../components/audit-advanced-group-mixins'
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import dataService from './data-config'
import SdDataTable from '@/common/components/sd-data-table.vue'
import TableActionTypes from '@/common/services/table-action-types'

export default {
  name: 'AuditDataList',
  metaInfo: {
    title: '数据查看',
  },
  components: {
    SdDataTable,
    auditClassTree,
    auditAdvancedQuery,
  },
  mixins: [auditAdvancedQueryMixins, auditAdvancedGroupMixins],
  data() {
    return {
      editnode: true,
      key: 0,
      searchform: 'searchform',
      formData: {
        categoryName: '',
        categoryId: '',
      },
      auditOrgId: null,
      parentId: 0,
      parentCategoryId: '000000',
      level: 1,
      isEnd: null,
      columns: [
        {
          dataIndex: 'dataCategoryBean.id',
          sdHidden: true,
        },
        {
          dataIndex: 'dataCategoryBean.categoryName',
          title: '分类名称',
          scopedSlots: { customRender: 'categoryName' },
        },
        {
          dataIndex: 'dataCategoryBean.categoryId',
          title: '分类编号',
        },
        {
          dataIndex: 'dataCategoryBean.categoryDesc',
          title: '分类描述',
        },
        {
          dataIndex: 'dataCategoryBean.weightNum',
          title: '权重',
          sdHidden: true,
        },
        {
          dataIndex: 'dataCategoryBean.sortNum',
          title: '排序',
          sdHidden: true,
        },
        {
          dataIndex: 'dataCategoryBean.reservestring1',
          sdHidden: true,
        },
      ],
      actions: [
        {
          label: '授权申请',
          permission: null,
          type: TableActionTypes.primary,
          callback: this.empower,
        },
      ],
      expressions: [],
      isroot: true,
      className: '',
      detailShow: false,
      detailInfo: {},
    }
  },
  methods: {
    showNameStatue(record) {
      return record.dataCategoryBean.reservestring1 === 'true'
    },
    // 查看详情
    dataDetail(record) {
      this.detailInfo = record.dataCategoryBean
      this.detailShow = true
    },
    handleSearch() {
      this.expressions = []
      // 模型编号
      if (this.formData.categoryId) {
        this.expressions.push({
          dataType: 'str',
          name: 'categoryId',
          op: 'like',
          stringValue: `%${this.formData.categoryId}%`,
        })
      }
      // 模型名称
      if (this.formData.categoryName) {
        this.expressions.push({
          dataType: 'str',
          name: 'categoryName',
          op: 'like',
          stringValue: `%${this.formData.categoryName}%`,
        })
      }
    },
    treeSelect(selectedKeys, info) {
      this.formData.categoryId = ''
      this.formData.categoryName = ''
      this.expressions = []
      if (info.selectedNodes[0].key !== '0') {
        const categoryId = info.selectedNodes[0].data.props.props.categoryId
        this.expressions = [
          {
            dataType: 'str',
            name: 'categoryId',
            op: 'like',
            stringValue: `%${categoryId}%`,
          },
        ]
      }
    },
    refresh() {
      this.$refs.dataTable.refresh()
    },
    // 授权
    empower() {
      const url = '/sd-flow-guide?code=PRODUCT_IAM_SQSQ' // 新页面要打开的路由地址
      crossWindowWatcher.waitForChanged(url).then((refreshFlag) => {
        if (refreshFlag) {
          // 这里写或者调刷新的方法
          this.refresh()
        }
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrap-height {
  height: 100%;
  .row-left {
    width: 20%;
  }
  .row-height {
    display: flex;
    flex: auto;
    height: 100%;

    .rightcard {
      flex: 1;
      width: calc(100% - 20%);
      height: 100%;
      overflow-y: auto;
    }
  }
}

.dataclass {
  :global(.projectlist .ant-table-empty .ant-table-body) {
    overflow-x: hidden !important;
  }

  :global(span > .ant-btn:nth-child(2)) {
    color: #fff;
    background-color: #1890ff;
    border-color: #1890ff;
  }

  // :global(.ant-table-placeholder) {
  //   width: auto;
  // }
}
.invalid {
  color: #ccc;
}
</style>