hi-ucs/front/src/views/demandCenter/demandDetails.vue

<template>
  <home-header></home-header>
  <div class="main-cont">
    <div class="main">
      <div class="top">
        <div class="form-container">
          <div class="title">基础信息</div>
          <a-form
            ref="formRef"
            :model="formName"
            name="basic"
            :label-col="{ style: { width: '106px' } }"
            :wrapper-col="{ style: { width: '230px' } }"
            labelAlign="left"
            autocomplete="off"
          >
            <div class="base-info">
              <a-form-item
                label="申请人"
                name="applyUserName"
                :rules="[{ required: true, message: '请输入申请人' }]"
              >
                <a-input
                  disabled="true"
                  placeholder="请输入申请人"
                  v-model:value="formName.applyUserName"
                />
              </a-form-item>

              <a-form-item
                style="margin: 0 22px"
                label="申请人电话"
                name="applyUserPhone"
                :rules="[
                  {
                    required: true,
                    pattern: /^1[3456789]\d{9}$/,
                    message: '请输入正确的电话号码',
                  },
                ]"
              >
                <a-input
                  disabled="true"
                  placeholder="请输入申请人电话"
                  v-model:value="formName.applyUserPhone"
                />
              </a-form-item>

              <a-form-item
                label="申请单位"
                name="applyUserDeptName"
                :rules="[{ required: true, message: '请输入申请单位' }]"
              >
                <a-input
                  disabled="true"
                  placeholder="请输入申请单位"
                  v-model:value="formName.applyUserDeptName"
                />
              </a-form-item>
            </div>

            <div class="title">需求信息</div>

            <a-tooltip placement="top" mouseEnterDelay="1">
              <template #title>
                <span>{{ formName.demandSubject }}</span>
              </template>
              <a-form-item
                label="需求标题"
                name="demandSubject"
                style="width: 350px"
                :rules="[{ required: true, message: '请输入需求标题' }]"
              >
                <a-input
                  disabled="true"
                  placeholder="请输入需求标题"
                  v-model:value="formName.demandSubject"
                />
              </a-form-item>
            </a-tooltip>

            <a-form-item
              style="margin-bottom: 10px"
              label="需求类型"
              name="请选择需求类型"
            >
              <a-select
                disabled="true"
                ref="select"
                v-model:value="formName.detailsType"
                @focus="focus"
                style="width: 200px"
              >
                <a-select-option value="基础设施">基础设施</a-select-option>
                <a-select-option value="数据资源">数据资源</a-select-option>
                <a-select-option value="组件服务">组件服务</a-select-option>
                <a-select-option value="应用资源">应用资源</a-select-option>
                <a-select-option value="知识库">知识库</a-select-option>
              </a-select>
            </a-form-item>

            <a-tooltip placement="top" mouseEnterDelay="1">
              <template #title>
                <span>{{ formName.detailsField }}</span>
              </template>
              <a-form-item
                label="应用领域"
                name="detailsField"
                style="width: 350px"
                :rules="[{ required: true, message: '请输入应用领域' }]"
              >
                <a-input
                  disabled="true"
                  placeholder="请输入应用领域"
                  v-model:value="formName.detailsField"
                />
              </a-form-item>
            </a-tooltip>

            <a-form-item
              style="margin-bottom: 10px"
              label="需求描述"
              name="demandDetails"
              :rules="[{ required: true, message: '请输入需求描述' }]"
            >
              <a-textarea
                disabled="true"
                style="
                  width: 500px;
                  height: 150px;
                  font-size: 16px;
                  line-height: 24px;
                  color: #333;
                  border: 1px solid #e0e0e0;
                  border-radius: 6px;
                  padding: 10px;
                  resize: none;
                "
                v-model:value="formName.demandDetails"
              />
            </a-form-item>
            <a-form-item
              v-if="formName.enclosure"
              style="color: #666; font-size: 16px"
              label="附件下载"
            >
              <button
                style="
                  width: 100px;
                  height: 30px;
                  margin-right: 10px;
                  background: rgb(237, 244, 252);
                  color: rgb(0, 135, 255);
                  font-size: 14px;
                  border-radius: 6px;
                  border: 1px solid rgb(187, 211, 239);
                  padding: 0px;
                  text-align: center;
                  cursor: pointer;
                "
                @click="downloadFile(formName.enclosure, '申请附件')"
              >
                下载
              </button>
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="middle">
        <div class="evaluate">
          <div>
            <a-textarea
              v-model:value="myComment"
              placeholder="写下你的评论..."
              style="width: 500px; height: 50px"
            />
          </div>
          <a-button
            style="margin-top: 20px"
            type="primary"
            class="btn-first"
            @click="evaluateSubmit"
          >
            发布评论
          </a-button>
        </div>
        <a-list
          class="comment-list"
          :header="`全部${total || 0} 评论`"
          item-layout="horizontal"
          :data-source="evaluateData"
        >
          <template #renderItem="{ item }">
            <a-list-item>
              <a-comment :author="item.name">
                <!-- <template v-if="item.name == user.applyUserName" #actions>
                  <a-popconfirm
                    title="确定删除评论?"
                    ok-text="确定"
                    cancel-text="取消"
                    @confirm="confirm(item)"
                    @cancel="cancel"
                  >
                    <span>删除</span>
                  </a-popconfirm>
                </template> -->
                <template #content>
                  <p v-if="!evaluateUpdateStatus">
                    {{ item.comment }}
                  </p>
                  <!-- <p v-else>
                    <a-input-group compact>
                      <a-input
                        v-model:value="evaluateUpdateComment"
                        style="width: calc(100% - 200px)"
                      />
                      <a-button type="primary">提交</a-button>
                    </a-input-group>
                  </p> -->
                </template>
                <template #datetime>
                  <span>{{ item.createDeptName }}</span>
                  <a-tooltip :title="item.createDate">
                    <span>{{ item.createDate }}</span>
                  </a-tooltip>
                </template>
              </a-comment>
            </a-list-item>
          </template>
          <a-pagination
            size="small"
            pageSize="8"
            :total="total"
            @change="handleCurrentChange"
          />
        </a-list>
      </div>
    </div>
  </div>
</template>

<script setup>
  // import { useStore } from 'vuex'
  import { useRouter } from 'vue-router'
  import { message } from 'ant-design-vue'
  import { onMounted, ref } from 'vue'
  import HomeHeader from '@/views/home/components/header'
  import {
    demandComment,
    demandCommentPage,
    demandCommentDelete,
    demandCommentApply,
  } from '@/api/demandCenter'
  import { getUser, getUserInfo } from '@/api/home'
  import { getDemandForm } from '@/api/personalCenter'
  const user = {
    applyUserName: '',
    applyUserDeptName: '',
  }
  getUser().then((res) => {
    user.applyUserName = res.data.data.realName
    getUserInfo(res.data.data.id).then((res) => {
      user.applyUserDeptName = res.data.data.deptName
    })
  })
  //删除提示框
  const confirm = (item) => {
    console.log(item)
    evaluateDelete(item)
  }

  const cancel = (e) => {
    console.log(e)
    message.error('已取消删除')
  }
  // const store = useStore()
  const router = useRouter()

  //表单信息
  const formName = ref({})

  const evaluateData = ref([])

  const myComment = ref('')
  const evaluateSubmit = () => {
    if (myComment.value === '') {
      message.error('请填写评价！')
      return
    }

    demandComment({
      targetId: formName.value.id,
      createDeptName: user.applyUserDeptName,
      comment: myComment.value,
      name: user.applyUserName,
    }).then((res) => {
      console.log(res)
      if (res.data.code == '0') {
        demandCommentApply({ id: res.data.data.id }).then((res1) => {
          if (res1.data.code == '0') {
            message.success('提交评价成功！')
            myComment.value = ''
            evaluateList()
          }
        })
      }
    })
  }
  // const evaluateUpdateStatus = ref(false)
  // const evaluateUpdateComment = ref('')
  // const evaluateUpdate = () => {
  //   evaluateUpdateStatus.value = true
  //   demandCommentUpdate({
  //     targetId: formName.value.id,
  //     createDeptName: user.applyUserDeptName,
  //     comment: evaluateUpdateComment.value,
  //     name: user.applyUserName,
  //   }).then(() => {
  //     message.success('修改评价成功！')
  //     evaluateUpdateComment.value = ''
  //     evaluateList()
  //   })
  // }

  const evaluateDelete = (item) => {
    demandCommentDelete([item.id]).then((res) => {
      if (res.data.code == 0) {
        message.success('删除评论成功！')
      }
      evaluateList()
    })
  }
  const evaluateList = () => {
    const params = {
      page: page.value,
      limit: 8,
      targetId: formName.value.id,
    }
    demandCommentPage(params).then((res) => {
      evaluateData.value = res.data.data.list
      total.value = res.data.data.total
    })
  }

  const total = ref()
  const page = ref(1)
  const handleCurrentChange = (val) => {
    console.log(val)
    page.value = val
    evaluateList()
  }

  const downloadFile = (path, name) => {
    const xhr = new XMLHttpRequest()
    xhr.open('get', path)
    xhr.responseType = 'blob'
    xhr.send()
    xhr.onload = function () {
      if (this.status === 200 || this.status === 304) {
        // 如果是IE10及以上，不支持download属性，采用msSaveOrOpenBlob方法，但是IE10以下也不支持msSaveOrOpenBlob
        if ('msSaveOrOpenBlob' in navigator) {
          navigator.msSaveOrOpenBlob(this.response, name)
          return
        }
        // const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
        // const url = URL.createObjectURL(blob);
        const url = URL.createObjectURL(this.response)
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = url
        a.download = name
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        URL.revokeObjectURL(url)
      }
    }
  }

  onMounted(() => {
    // const formData = computed(() => store.getters['home/demandDetailsData'])
    // formName.value = formData.value
    const id = router.currentRoute.value.query.id
    getDemandForm(id).then((res) => {
      const { data } = res.data
      formName.value.applyUserName = data.applyUserName
      formName.value.applyUserPhone = data.applyUserPhone
      formName.value.applyUserDeptName = data.applyUserDeptName
      formName.value.detailsField = data.detailsField
      formName.value.demandDetails = data.demandDetails
      formName.value.detailsType = data.detailsType
      formName.value.demandSubject = data.demandSubject
      formName.value.id = data.id
      formName.value.enclosure = data.enclosure
      evaluateList()
    })
  })
</script>

<style scoped lang="less">
  .main-cont {
    margin-top: 64px;
    width: 100%;
    height: calc(100%-90px);
    background: url('~@/assets/demandCenter/bj.png') no-repeat;
    background-position-x: center;
    display: flex;
    justify-content: center;
    .main {
      width: 1550px;
      height: 100%;
      padding-top: 30px;
      display: flex;
      flex-direction: column;
      .top {
        background-color: #ffffff;
        box-shadow: 10px 8px 10px 3px #9dc6ea;
        .ant-card {
          background: transparent;
          border: none;
          .ant-card-grid {
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
            border: 1px solid #fff;
            background-color: #fff;
            cursor: pointer;
          }
        }
      }
      .middle {
        // height: 850px;
        background-color: #ffffff;
        box-shadow: 10px 8px 10px 3px #9dc6ea;
        padding: 20px;
        .title {
          font-size: 22px;
          font-weight: 500;
          color: #1492ff;
        }
        .ant-list {
          // height: 730px;
          overflow-y: scroll;
          :deep(.ant-list-item-meta-title) {
            display: flex;
            justify-content: space-between;
            .name {
              font-size: 18px;
              color: #1492ff;
            }
          }
          :deep(.ant-list-item-meta-description) {
            display: -webkit-box;
            /*设置为弹性盒子*/
            -webkit-line-clamp: 2;
            /*最多显示2行*/
            overflow: hidden;
            /*超出隐藏*/
            text-overflow: ellipsis;
            /*超出显示为省略号*/
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
        }
        // 隐藏滚动条
        .ant-list::-webkit-scrollbar {
          display: none;
        }
        .ant-pagination {
          margin-top: 10px;
        }
      }
    }
  }
  .form-container {
    padding: 20px 20px 30px 20px;
    .title {
      font-size: 20px;
      color: #000;
      font-weight: bold;
      margin-bottom: 20px;
    }
  }
  .base-info {
    display: flex;
  }
  :deep(.ant-form-item-label) {
    label {
      color: #666;
      font-size: 16px;
      &::after {
        content: '';
      }
    }
  }
  :deep(.ant-form-item-required) {
    &::before {
      font-size: 8px;
      margin-right: 10px;
    }
  }

  :deep(.ant-input) {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
  }
</style>