hi-ucs/front/src/views/personalCenter/components/Evaluate.vue

<template>
  <div class="on-the-right-side-of-the-list">
    <div class="title" style="margin-bottom: 0.2rem">能力评价</div>
    <!--类型-->
    <div class="top-title" v-show="chooseTab == 0">
      <div
        v-for="(item, index) in typeList"
        :key="index"
        :class="index === typeIndex ? 'sel' : ''"
        @click="changeType(item, index)"
      >
        <span
          class="photo"
          :style="{
            backgroundImage: `url(${item.photo}) `,
            backgroundSize: 'cover',
          }"
        ></span>
        <span>
          {{ item.name }}
        </span>
      </div>
    </div>
    <div v-if="contentList.data.length > 0">
      <div class="content">
        <div
          class="content-body"
          v-for="item in contentList.data"
          :key="item.index"
        >
          <a-tooltip>
            <template #title>
              {{ item.system }}
            </template>
            <div class="content-body-title">
              <span>{{ item.system }}</span>
              <div></div>
            </div>
          </a-tooltip>
          <div class="description">
            <span>描述：{{ item.description || '--' }}</span>
            <div></div>
          </div>
          <div class="content-body-content" style="display: flex">
            <div style="margin-right: 20px">
              申请日期：{{ item.createDate }}
            </div>
            <div style="margin-right: 20px">类型：{{ item.resourceTYpe }}</div>
            <div>提供单位：{{ item.resourceDept }}</div>
          </div>
          <div class="button-box">
            <div class="button" @click="showDetail(item)">查看详情</div>
            <div
              class="button"
              @click="showEvaluate(item, '评价')"
              v-if="typeName === '待评价' && item.approveStatus === '通过'"
            >
              评价
            </div>
            <div
              class="button"
              @click="showEvaluate(item, '修改')"
              v-else-if="typeName === '已评价'"
            >
              修改
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <a-pagination
          size="small"
          pageSize="4"
          :total="total"
          :current="page"
          :showTotal="(total) => `共 ${total} 项`"
          @change="handleCurrentChange"
          :showSizeChanger="false"
        />
      </div>
    </div>
    <div style="height: 640px; background: #fff; padding-top: 200px" v-else>
      <a-empty />
    </div>
    <a-modal
      v-model:visible="visible"
      width="30%"
      :title="type"
      @ok="handleOk"
      @cancel="handleCancel"
      :maskClosable="false"
    >
      <div class="modal">
        <a-form
          ref="formRef"
          :model="fromData"
          name="formRef"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          autocomplete="off"
        >
          <a-form-item
            label="综合评价"
            name="score"
            :rules="[{ required: true, message: '请填写综合评价！' }]"
          >
            <a-rate v-model:value="fromData.score" />
          </a-form-item>
          <a-form-item
            v-if="resourceTYpe === '应用资源'"
            label="产品质量"
            name="qualityScore"
            :rules="[{ required: true, message: '请填写产品质量！' }]"
          >
            <a-rate v-model:value="fromData.qualityScore" />
          </a-form-item>
          <a-form-item
            v-else-if="resourceTYpe === '智能算法'"
            label="算法准确度"
            name="algorithmExactScore"
            :rules="[{ required: true, message: '请填写算法准确度！' }]"
          >
            <a-rate v-model:value="fromData.algorithmExactScore" />
          </a-form-item>
          <a-form-item
            v-else
            label="组件服务质量"
            name="assemblyQualityScore"
            :rules="[{ required: true, message: '请填写组件服务质量！' }]"
          >
            <a-rate v-model:value="fromData.assemblyQualityScore" />
          </a-form-item>
          <a-form-item
            label="评价内容"
            name="comment"
            :rules="[{ required: true, message: '请填写评价内容！' }]"
          >
            <a-textarea
              v-model:value="fromData.comment"
              placeholder="请输入评价内容"
              :auto-size="{ minRows: 3, maxRows: 3 }"
            />
          </a-form-item>
        </a-form>
        <!-- <div>
          <span>综合评价</span>
          <a-rate v-model:value="fromData.score" />
        </div>
        <div v-if="resourceTYpe === '应用资源'">
          <span>产品质量</span>
          <a-rate v-model:value="fromData.qualityScore" />
        </div>
        <div v-else-if="resourceTYpe === '智能算法'">
          <span>算法准确度</span>
          <a-rate v-model:value="fromData.algorithmExactScore" />
        </div>
        <div v-else>
          <span>组件服务质量</span>
          <a-rate v-model:value="fromData.assemblyQualityScore" />
        </div>
        <div>
          <span>评价内容</span>
          <a-textarea
            v-model:value="fromData.comment"
            placeholder="请输入评价内容"
            :auto-size="{ minRows: 3, maxRows: 3 }"
          />
        </div> -->
      </div>
    </a-modal>
  </div>
</template>

<script setup>
  import { onMounted, reactive, ref, defineProps } from 'vue'
  import { useRouter } from 'vue-router'
  import { getUserInfo } from '@/api/user'
  import {
    pageForScore,
    resourcescoreInsert,
    resourcescoreUpdate,
    resourcescoreSelect,
  } from '@/api/personalCenter'
  import { message } from 'ant-design-vue'
  import mybus from '@/myplugins/mybus'
  import * as moment from 'moment'

  const props = defineProps({
    tabTypeName: { type: String, default: '' },
  })
  const router = useRouter()
  const userName = ref('')
  getUserInfo().then((res) => {
    userName.value = res.data.data.username
  })
  const formState = ref({ name: '' })
  //选择展示的Tab页
  let chooseTab = ref(0)
  let typeList = ref([
    {
      photo: require('@/assets/newHome/nengli1.png'),
      name: '待评价',
    },
    {
      photo: require('@/assets/newHome/nengli2.png'),
      name: '已评价',
    },
  ])
  const contentList = reactive({ data: [] })
  let tabIndex = ref(0)
  let typeIndex = ref(0)
  let typeName = ref('待评价')

  if (router.currentRoute.value.query.tabTypeName) {
    typeName.value = router.currentRoute.value.query.tabTypeName
  }
  const numFlag = ref(true)

  const num = ref({
    finished: 0,
    unfinished: 0,
  })
  const total = ref('')
  const showType = ref('')
  const page = ref('1')
  const ended = ref('')

  // 选择类型
  const changeType = (item, index) => {
    contentList.data = []
    formState.value.name = ''
    numFlag.value = true
    num.value = []
    showType.value = ''
    tabIndex.value = 0
    ended.value = ''
    page.value = 1
    typeIndex.value = index
    typeName.value = item.name
    getApplyList()
  }

  const getApplyList = () => {
    pageForScore({
      page: page.value,
      limit: 4,
      score: typeName.value === '已评价',
    }).then((res) => {
      console.log('评分列表', res.data.data)
      contentList.data = res.data.data.list
      total.value = res.data.data.total
    })
  }

  const handleCurrentChange = (val) => {
    console.log('切换', val)
    page.value = val
    getApplyList()
  }

  const showDetail = (item) => {
    if (typeName.value === '待评价' && item.approveStatus !== '通过') {
      mybus.emit('selectMenu', {
        title: '我的申请',
        img: require('@/assets/personalCenter/apply.png'),
        imgActive: require('@/assets/personalCenter/applyactive.png'),
        key: 'apply',
      })
    } else {
      console.log(item)
      const detailPage = router.resolve({
        path: '/details', // 跳转的页面路由
        query: {
          id: item.resourceId,
          hiddenBackFlag: true,
        },
      })
      window.open(detailPage.href, '_blank')
    }
  }

  // 评分
  const formRef = ref()
  const visible = ref(false)
  const type = ref('')
  const resourceTYpe = ref('')
  const fromData = ref({
    resourceId: '',
    score: null,
    qualityScore: null,
    algorithmExactScore: null,
    assemblyQualityScore: null,
    comment: '',
  })
  const showEvaluate = (item, str) => {
    type.value = str
    resourceTYpe.value = item.resourceTYpe
    fromData.value.resourceId = item.resourceId
    if (str === '修改') {
      resourcescoreSelect(item.resourceId).then((res) => {
        fromData.value.id = res.data.data.id
        fromData.value.score = res.data.data.score
        fromData.value.qualityScore = res.data.data.qualityScore
        fromData.value.algorithmExactScore = res.data.data.algorithmExactScore
        fromData.value.assemblyQualityScore = res.data.data.assemblyQualityScore
        fromData.value.comment = res.data.data.comment
        visible.value = true
      })
    } else {
      visible.value = true
    }
  }
  const handleOk = () => {
    console.log(fromData.value, type.value)
    formRef.value.validate().then(() => {
      if (type.value === '评价') {
        resourcescoreInsert(fromData.value).then((res) => {
          if (res.data.code != 0) {
            message.warning('评价失败！')
            return
          }
          message.success('评价成功！')
          handleCancel()
          page.value = 1
          getApplyList()
        })
      } else {
        resourcescoreUpdate(fromData.value).then((res) => {
          if (res.data.code != 0) {
            message.warning('评价失败！')
            return
          }
          message.success('评价成功！')
          handleCancel()
          page.value = 1
          getApplyList()
        })
      }
    })
  }
  const handleCancel = () => {
    visible.value = false
    fromData.value = {
      resourceId: '',
      score: null,
      qualityScore: null,
      algorithmExactScore: null,
      assemblyQualityScore: null,
      comment: '',
    }
  }
  onMounted(() => {
    getApplyList()

    if (props.tabTypeName) {
      let _index = typeList.value.findIndex((v) => v == props.tabTypeName)
      changeType(props.tabTypeName, _index != -1 ? _index : 0)
    }
  })
</script>

<style scoped lang="less">
  .top-title {
    background: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 18px;
    font-family: 'Alibaba PuHuiTi';
    color: #000000;
    line-height: 0.34rem;
    margin-bottom: 0.2rem;

    .photo {
      display: inline-block;
      height: 28px;
      width: 28px;
      margin-right: 0.1rem;
    }

    div {
      padding: 0 0.4rem;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 25%;
    }

    div:hover {
      color: #0058e1;
    }

    .sel {
      font-weight: 600;
      color: #0058e1;
      border-bottom: 0.024rem solid #0058e1;
    }
  }

  .queryButton {
    background: #0058e1;
    width: 80px;
    height: 32px;
    margin-left: 20px;
    border: 1px solid #0058e1;
    border-radius: 2px;
    color: #fff;
  }

  .on-the-right-side-of-the-list {
    background: #fff;
    padding: 20px 0px 30px 20px;
    position: absolute;
    width: 1087px;
    height: 810px;
    top: 0px;
    display: flex;
    margin-top: 20px;
    flex-direction: column;
    font-size: 16px;
    justify-content: left;

    .second-title {
      background: #f4f5f8;
      margin-left: 100px;
      margin-top: 30px;
      // margin-bottom: 22px;
      font-size: 18px;
      cursor: pointer;
      text-align: center;
      background: #fff;
      width: 820px;
      height: 40px;
      line-height: 40px;
      display: table;
      border-top: 1px solid #d9d9d9;
      border-bottom: 1px solid #d9d9d9;
    }
    .second-title div {
      border-right: 1px solid #d9d9d9;
    }
    .second-title div:first-child {
      border-left: 1px solid #d9d9d9;
    }

    .chooseStyle {
      display: table-cell;
      width: 200px;
      color: #fff;
      border: 1px solid #0058e1;
      background-color: #0058e1;
    }

    .noChooseStyle {
      display: table-cell;
      width: 200px;
    }

    .title {
      font-size: 20px;
      color: #000000;
      font-family: 'Alibaba PuHuiTi';
      font-weight: 500;
    }

    .sousuokuang {
      margin: 20px 0px 21px 0px;

      .ant-input-search {
        max-width: 490px;
      }

      :deep(.ant-input) {
        width: 400px;
        height: 36px;
        font-size: 14px;
        color: #b2b2b2;
        background: #f5f5f5;
      }

      :deep(.ant-input-group-addon) {
        display: inline-block;
        margin-left: 10px;

        .ant-input-search-button {
          width: 80px;
          height: 36px;
          border-radius: 4px;
          font-size: 14px;
        }
      }
    }

    .tab {
      display: flex;
      font-size: 16px;
      margin-left: 16px;
      display: flex;

      padding-top: 24px;
      //margin-left: 16px;
      border-bottom: 1px solid #0058e1;

      div {
        background: #eeeff1;

        height: 40px;
        width: 180px;
        line-height: 40px;
        border-radius: 2px;
        text-align: center;
        cursor: pointer;
        color: #212121;
        border-left: 1px solid #dddee1;
      }

      .tabclass {
        background: #fff;
        border-left: 1px solid #0087ff;
        border-right: 1px solid #0087ff;
        border-top: 1px solid #0087ff;
      }
    }

    .content-cloud {
      padding: 0px 10px;
      overflow-y: scroll;
      height: 658px;

      background: #fff;
      margin-left: 16px;
      .content-cloud-body {
        margin-bottom: 10px;
        height: 100px;
        height: 100px;
        margin-bottom: 10px;
        border-bottom: 1px solid #cccccc;

        .content-body-left {
          width: 85%;
          float: left;

          .content-body-left-one {
            display: table;
            height: 50px;
            width: 80%;

            div {
              display: table-cell;
              width: 50%;
              font-size: 14px;
            }
          }

          .content-body-left-two {
            width: 80%;
            height: 50px;
            display: table;

            div {
              display: table-cell;
              width: 30%;
              font-size: 14px;
            }
          }
        }

        .content-body-right {
          width: 15%;
          float: left;
        }
      }
    }

    .content {
      margin-left: 16px;
      padding-left: 12px;
      padding-right: 10px;
      height: 610px;
      overflow-y: scroll;
      background: #fff;
      .content-body {
        padding-bottom: 10px;
        padding-top: 10px;
        margin-right: 10px;
        height: 130px;
        border-bottom: #cccccc 1px solid;
        position: relative;

        .content-body-title {
          min-width: 100px;
          max-width: 900px;
          width: fit-content;
          font-size: 18px;
          color: #333333;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .description {
          min-width: 100px;
          max-width: 900px;
          font-size: 14px;
          height: 40px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .content-body-content {
          margin-top: 10px;
          margin-bottom: 10px;
          margin-right: 40px;
          /* width: 720px; */
          display: inline-block;
        }

        .content-body-content-son {
          line-height: 16px;
          font-size: 12px;
          width: 100%;
          // text-overflow: -o-ellipsis-lastline;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // display: -webkit-box;
          // -webkit-line-clamp: 3;
          // -webkit-box-orient: vertical;
          display: flex;
          color: #999999;

          span {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            max-width: 8.1rem;
            line-height: 24px;
            word-break: break-all;
          }
        }

        .content-body-bottom {
          display: flex;
          color: #cccccc;
          font-size: 12px;

          div:first-child {
            margin-right: 30px;
          }
        }
      }
    }

    .bottom {
      position: absolute;
      bottom: 30px;
      right: 20px;
    }

    .button-box {
      position: absolute;
      right: 20px;
      top: 10px;
      display: flex;
      flex-direction: column;
    }

    .button {
      width: 80px;
      height: 32px;
      margin: 5px 0;
      background: #0058e1;
      font-size: 14px;
      color: #fff;
      border-radius: 1px;
      text-align: center;
      line-height: 32px;
      cursor: pointer;
    }

    .buttonAgree {
      background-color: #49c988;
    }

    .backToFirst {
      background-color: rgb(214, 91, 91);
    }
  }

  :deep(.ant-badge-count) {
    top: -5px;
    right: -10px;
  }
  .modal {
    & > div {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      & > span {
        width: 100px;
      }
      textarea {
        margin-left: 15px;
      }
    }
  }
</style>