dbsd_kczx/src/views/zy/zyTlq/TlqJiaohuList.vue

<template>
  <div id="siteMain">
    <div id="maxSite">
      <a-layout style="height: calc(100vh - 30px)">
        <headerPage/>
        <div style="margin-top:10px;background:#fff;">
          <div style="padding: 20px;width: 98%;">
            <a-row>
              <a-col :span="24"><span style="line-height:20px;font-size:18px;font-weight:bold;">{{tlqInfo.title}}</span></a-col>
              <a-col :span="24" v-if="tlqInfo.picPath" style="margin-top:20px;">
                <j-upload v-model:value="tlqInfo.picPath" fileType="image" :isImageMode="false" :maxCount="1" :buttonVisible="false" disabled="true" style="width:300px;"></j-upload>
              </a-col>
              <a-col :span="24" v-if="tlqInfo.filePath" style="margin-top:20px;">
                <j-upload v-model:value="tlqInfo.filePath"  :maxCount="1" :buttonVisible="false" disabled="true"></j-upload>
              </a-col>
            </a-row>
            <a-divider style="border-color: #7cb305" dashed />
          </div>
          <div style="width:98%;" v-for="(item,index) in dataSource">
            <a-comment style="padding: 20px;">
              <template #author>{{item.studentName}}</template>
              <template #datetime>
                <span>{{item.createTime}}</span>
              </template>
              <template #content>
                <p>
                  {{item.content}}
                </p>
                <p v-if="item.picPath" style="margin-top: 20px;">
                  <j-upload v-model:value="item.picPath" fileType="image" :isImageMode="false" :maxCount="1" :buttonVisible="false" disabled="true" style="width:300px;"></j-upload>
                </p>
                <p v-if="item.filePath" style="margin-top: 20px;">
                  <j-upload v-model:value="item.filePath" :maxCount="1" :buttonVisible="false" disabled="true" ></j-upload>
                </p>
              </template>
            </a-comment>
            <a-divider style="border-color: #7cb305" dashed />
          </div>
          <div style="padding: 40px;background: #fafafa">
            <a-row>
              <a-col :span="24">
                <div style="font-size: 18px;font-weight: 700;">发表内容：</div>
                <div><a-textarea v-model:value="formData.content" style="height: 100px"></a-textarea></div>
              </a-col>
              <a-col :span="12">
                <div style="font-size: 18px;font-weight: 700;">图片：</div>
                <div>
                  <j-upload v-model:value="formData.picPath" fileType="image" :maxCount="9" ></j-upload>
                </div>
              </a-col>
              <a-col :span="12">
                <div style="font-size: 18px;font-weight: 700;">附件：</div>
                <div><j-upload v-model:value="formData.filePath" :maxCount="9" ></j-upload></div>
              </a-col>
              <a-col :span="24">
                <a-button type="primary" @click="submitForm">发表</a-button>
              </a-col>
            </a-row>
          </div>
        </div>
        <footerPage style="margin-top:10px;"/>
      </a-layout>
    </div>
  </div>
</template>

<script lang="ts" name="zyTlq-zyTlq" setup>
  import { ref, reactive, onMounted, unref ,defineComponent } from 'vue';
  import { Pagination, Empty } from 'ant-design-vue';
  import { defHttp } from '/@/utils/http/axios';
  import { useRouter } from 'vue-router';
  import { LikeFilled, LikeOutlined, DislikeFilled, DislikeOutlined } from '@ant-design/icons-vue';
  import headerPage from '/@/views/site/common/header.vue';
  import footerPage from '/@/views/site/common/footer.vue';
  import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
  import dayjs from 'dayjs';
  import relativeTime from 'dayjs/plugin/relativeTime';
  
  import { Comment } from 'ant-design-vue';

dayjs.extend(relativeTime);
  const queryParam = ref<any>({});
  const toggleSearchStatus = ref<boolean>(false);
  const registerModal = ref();
  const dataSource = ref<any>([]);
  const tlqInfo = ref<any>({});
  const formData = ref<any>({});
  const current = ref<number>(0);
  const total = ref<number>(0);
  const pageNo = ref<number>(0);
  const pageSize = ref<number>(50);
  const APagination = Pagination;
  const AComment = Comment;
  const { currentRoute } = useRouter();
  const { query } = unref(currentRoute);
  const { id } = query;//获取传递参数
  const labelCol = reactive({
    xs: { span: 24 },
    sm: { span: 7 },
  });
  const wrapperCol = reactive({
    xs: { span: 24 },
    sm: { span: 4 },
  });

  const likes = ref<number>(0);
  const dislikes = ref<number>(0);
  const action = ref<string>();

  const like = () => {
    likes.value = 1;
    dislikes.value = 0;
    action.value = 'liked';
  };

  const dislike = () => {
    likes.value = 0;
    dislikes.value = 1;
    action.value = 'disliked';
  };

  //新增翻页
  function handlePageChange(page: number) {
    loadData(page);
  }
   
  async function getTlqInfo(){
    await defHttp.get({ url: '/zyTlq/zyTlq/queryById', params: { id:id }}).then((res) => {
      console.log(`🚀 ~ awaitdefHttp.get ~ res:`, res)
      tlqInfo.value = res;
    });
  }
  function loadData(arg){
    defHttp.get({ url: '/zyTlqContent/zyTlqContent/list', params: {  mainId:id+"",column:'createTime',order:'desc' } }).then((res) => {
    console.log(`🚀 ~ defHttp.get ~ res:`, res)
      dataSource.value = res.records;
      total.value = res.total;
    });
  }
  
  function submitForm(){
    formData.value.mainId = id;
    defHttp.post({ url: '/zyTlqContent/zyTlqContent/add', params: formData.value}).then((res) => {
      loadData(1);
    });
  }
  //进入就加载
  onMounted(() => {
    getTlqInfo();
    loadData(1);
  });



</script>

<style lang="less" scoped>
#siteMain {
  // font-size: ;
  // height: 100%;
  background: #f3f3f4;
  #maxSite {
    //最大宽度
    max-width: 1070px;
    min-height: calc(100vh);
    //居中
    margin: 0 auto;
    .rowGutter{
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

    .ant-layout-header {
      color: #fff;
      background: #1ab394;
    }
    .ant-layout-footer {
      line-height: 1.5;
      background: #FFF;
    }
    .ant-layout-sider {
      color: #fff;
      line-height: 120px;
      background: #3ba0e9;
    }
    .ant-layout-content {
      min-height: 120px;
      color: #000;
      line-height: 120px;
      background: #f3f3f4;
    }
  }
}
  .jeecg-basic-table-form-container {
    .table-page-search-submitButtons {
      display: block;
      margin-bottom: 24px;
      white-space: nowrap;
    }
    .query-group-cust{
      width: calc(50% - 15px);
      min-width: 100px !important;
    }
    .query-group-split-cust{
      width: 30px;
      display: inline-block;
      text-align: center
    }
  }
  /deep/.ant-upload-list-picture-card-container {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 0 8px 8px 0;
    vertical-align: top;
}
/deep/.ant-upload.ant-upload-select-picture-card {
    width: 80px;
    height: 80px;
    margin-right: 8px;
    margin-bottom: 8px;
    text-align: center;
    vertical-align: top;
    background-color: #fafafa;
    border: 1px dashed #d9d9d9;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.3s;
}
</style>