dingxin_toolbox_vue/src/views/product/index.vue

<script setup>
import {onBeforeMount, onMounted, reactive, ref, unref, computed} from 'vue';
import {useStore, mapGetters, mapState} from "vuex";
import {project_list, prd_list, prd_add, prd_get, prd_update, prd_delete} from "@/apis/product.js";


// 注册vuex
const store = useStore()


// region 表单代码


// 点击搜索时提交的数据
const fromData = reactive({
  project: '全部',
})
// region 表格数据代码
// 表格展示的数据
const tableData = ref([])

// 过滤条件数据
const projectList = ref([])

const currentPage = ref(1)
const pageSize = ref(20)

const total = ref(0)

// 处理翻页
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  get_table_data(currentPage.value, pageSize.value, fromData.project)
}

const handleSizeChange = (newPageSize) => {
  pageSize.value = newPageSize
  get_table_data(currentPage.value, pageSize.value, fromData.project)
}


// 数据提交 点击搜索按键提交数据
const submitSearch = async () => {
  tableData.value = []
  await get_table_data(currentPage.value, pageSize.value, fromData.project).then(
      res => {
        if (Array.isArray(res)) {
          tableData.value = [...res]

        } else {

        }
      }
  ).catch(
      err => {
      }
  )
}

// 通过异步请求获取影院列表数据
async function get_project_data() {
  projectList.value = []
  await project_list().then(res => {
    if (Array.isArray(res)) {
      projectList.value = [...res]
      projectList.value.unshift({'id': 0, 'project_name': '全部', is_delete: false})
    } else {
    }
  }).catch(err => {
        console.log(err)
      }
  )
}

// 通过异步请求获取影院列表数据
async function get_table_data(page_num = currentPage.value, page_size = pageSize.value, project_val = fromData.project) {
  tableData.value = []
  console.log('get_table_data')
  console.log(project_val)
  project_val = project_val === '全部' ? '' : project_val
  console.log(project_val)
  await prd_list(page_num, page_size, project_val).then(res => {
    total.value = res['count']
    if (Array.isArray(res['results'])) {
      tableData.value = [...res['results']]
      console.log(tableData.value)
    } else {
      console.log('get_table_data.res is not an array')
    }
  }).catch(err => {
        console.log(err)
      }
  )
}

// 定义生命周期，在加载时获取一次表格数据
onMounted(
    async () => {
      await get_project_data();
      await get_table_data(currentPage.value, pageSize.value, fromData.project);
    }
)

// endregion

</script>

<template>
  <el-form
      :model="fromData"
      :inline="true"
      class="search_form"
  >
    <el-form-item label="所属项目" label-width="90">
      <el-select v-model="fromData.project" placeholder="请选择">
        <el-option v-for="item in projectList" :key="item['project_name']" :label="item['project_name']"
                   :value="item['project_name']"/>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitSearch">搜索</el-button>
    </el-form-item>
<!--    <el-button style="margin-right: 0">添加</el-button>-->
  </el-form>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="project" label="所属项目" min-width="200"></el-table-column>
    <el-table-column prop="prd_version" label="版本" min-width="200"></el-table-column>
    <el-table-column prop="prd_doc_link" label="产品原型链接" min-width="300" show-overflow-tooltip>
      <template v-slot="scope">
        <a target="_blank" style="color:#007bff;" v-if="scope.row.prd_doc_link!=null"
           v-bind:href="scope.row.prd_doc_link">
          {{ scope.row.prd_doc_link.length > 30 ? scope.row.prd_doc_link.slice(0, 30) + '...' : scope.row.prd_doc_link}}
        </a>
        <!--        <span v-else> {{ scope.row.prd_doc_link }}</span>-->
      </template>
    </el-table-column>
    <el-table-column prop="prd_comment" label="版本描述" min-width="300">
      <template #default="{ row }">
        <el-tooltip
            class="item"
            popper-class="custom-tooltip"
            effect="dark"
            :raw-content="true"
            :content="row.prd_comment.split('\n').join('<br>')"
            placement="top-end">
          <span>{{ row.prd_comment.length > 10 ? row.prd_comment.slice(0, 10) + '...' : row.prd_comment }}</span>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="update_at" label="最后更新时间" min-width="180"></el-table-column>
  </el-table>
  <div class="pagination-container">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        size="small"
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>


<style>
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.search_form {
  display: flex;
  justify-content: flex-start;
}

.custom-tooltip {
  max-width: 500px; /* 设置最大宽度为 300px */
}
</style>