diantou/src_product/iam/audit/model/audit-model-market.vue

<template>
  <div :class="[$style.wrapHeight, $style.modelMarket]">
    <div :class="$style.rowHeight">
      <a-card :class="$style.aCard">
        <audit-advanced-query
          :expand="expand"
          :search-data="formData"
          :ref-name="searchform"
          :search-style="{ height: '200px', left: '20px', top: '57px' }"
          :search-fun="handleSearch"
          @searchedClick="searchedClick"
        >
          <template>
            <a-col :span="12">
              <a-form-model-item :label="'模型名称'" prop="modelName">
                <a-input v-model="formData.modelName" allow-clear />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="模型类型:" prop="modelType">
                <a-select
                  v-model="formData.modelType"
                  :class="$style.selectClass"
                  placeholder="请选择模型类型"
                >
                  <a-select-option
                    v-for="(item, index) in tableOptions"
                    :key="index"
                    :value="item.id"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="创建人:" prop="creatorAccount">
                <a-input v-model="formData.creatorAccount" placeholder="请输入创建人" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="发布时间:">
                <a-range-picker :key="pickerKey" :format="'YYYY-MM-DD'" @change="onTimeChange" />
              </a-form-item>
            </a-col>
          </template>
        </audit-advanced-query>
        <div :class="$style.modeList">
          <sd-data-table
            ref="table"
            :data-url="dataUrl"
            :columns="columns"
            :filter-expressions="expressions"
            show-advance-query
            :search-fields="['modelName']"
            @searchbtnClick="searchbtnClick"
          >
            <template slot="likeCount" slot-scope="text, record">
              <a-tooltip :title="text" @click="onLike(record)">
                <a-icon type="like" :theme="record.likeFlag === 1 ? 'twoTone' : 'outlined'" />
              </a-tooltip>
            </template>
            <template slot="islink" slot-scope="text, record">
              <a-tooltip :title="text" @click="openModelDetail(record.id)">
                <a>{{ text }}</a>
              </a-tooltip>
            </template>
          </sd-data-table>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
import components from './_import-components/audit-model-market-import'
import auditModelService from './audit-model-service'
import TableColumnTypes from '@/common/services/table-column-types'
// 引入moment
import moment from 'moment'
import auditAdvancedQuery from '../../components/audit-advanced-query.vue'
import auditAdvancedQueryMixins from '../../components/audit-advanced-query-mixins'

const modelTypeList = [
  {
    id: 0,
    name: '分析型',
  },
  {
    id: 1,
    name: '定位型-整改类',
  },
  {
    id: 2,
    name: '定位型-关注类',
  },
]
export default {
  name: 'AuditModelMarket',
  metaInfo: {
    title: '模型市场',
  },
  components: {
    ...components,
    auditAdvancedQuery,
  },

  mixins: [auditAdvancedQueryMixins],
  data() {
    return {
      expressions: [],
      expand: false,
      searchform: 'searchform',
      pickerKey: 0,
      formData: {
        // modelName modelType creatorAccount publishDateSt publishDateEd
        modelName: '',
        modelType: '',
        creatorAccount: '',
        publishDateSt: '',
        publishDateEd: '',
      },
      tableOptions: modelTypeList,
      // 模型市场列表
      modelMarketList: [],
      // 分页器
      current: 1,
      total: 1,
      pageSize: 10,
      ifLike: false,
      dataUrl: 'api/xcoa-mobile/v1/iammodelmaintain/modelMarketQueryList',
      columns: [
        {
          dataIndex: 'modelName',
          title: '模型名称',
          scopedSlots: { customRender: 'islink' },
        },
        {
          dataIndex: 'creatorAccount',
          title: '创建人',
        },
        {
          dataIndex: 'modelCode',
          title: '模型编号',
        },
        {
          dataIndex: 'modelTypeName',
          title: '模型类型',
        },
        {
          dataIndex: 'publishDate',
          title: '发布时间',
          sdRender: TableColumnTypes.date,
        },
        {
          dataIndex: 'likeCount',
          title: '点赞',
          scopedSlots: { customRender: 'likeCount' },
        },
      ],
    }
  },

  methods: {
    handleSearch() {
      this.expressions = []
      Object.keys(this.formData).map((key) => {
        this.formData[key] !== '' &&
          this.expressions.push({
            dataType: 'str',
            name: key,
            op: 'eq',
            stringValue: this.formData[key],
          })
      })
      this.expressions.forEach((item) => {
        if (item.name === 'modelName') {
          item.op = 'like'
          item.stringValue = '%' + item.stringValue + '%'
        }
      })
    },

    // 时间变化
    onTimeChange(data, dataString) {
      const timeList = data.map((item) => {
        // 转化成时间戳 并忽略时分秒
        return moment(item._d)
          .startOf('day')
          .valueOf()
      })
      // 结束时间加一天的时间戳
      this.formData.publishDateSt = timeList[0]
      this.formData.publishDateEd = timeList[1] + 60 * 60 * 24 * 1000
    },

    // 点击点赞按钮
    onLike(item) {
      const data = {
        modelId: item.id,
      }
      if (this.ifLike) {
        return
      }
      this.ifLike = true
      if (item.likeFlag === 0) {
        auditModelService.likeModel(data).then((res) => {
          this.$refs.table.refresh()
          this.ifLike = false
        })
      } else {
        auditModelService.unlikeModel(data).then((res) => {
          this.$refs.table.refresh()

          this.ifLike = false
        })
      }
    },
    openModelDetail(id) {
      window.open('#/audit-model-view?record=' + id)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrap-height {
  position: relative;
  min-height: 100%;

  .row-height {
    display: flex;
    flex: auto;
    gap: 10px;
    width: 100%;
    height: 100%;
    .a-card {
      width: 100%;
      .select-class {
        width: 200px;
      }

      .mode-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 30px;
        .card {
          width: 430px;
          margin: 30px;
          overflow: hidden;
          cursor: pointer;
          border: 1px solid #ccc;
          border-radius: 10px;
          .title {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            color: #fff;
            background: $alert-info-icon-color;
          }
          .card-body {
            padding: 20px;
            border-bottom: 1px solid #ccc;
            .row {
              margin-top: 20px;
            }
          }
          .footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 20px;
          }
        }
      }

      .pagination {
        display: flex;
        justify-content: flex-end;
        padding: 20px;
      }
    }
  }
}

.model-market {
  :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;
  }
}
</style>