list.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <template>
  2. <hc-new-card id-ref="hc-certificate-list" div-p="12px">
  3. <template #header>
  4. <div class="w-100">
  5. <el-select v-model="searchForm.projectId" filterable block placeholder="选择项目" @change="searchClick">
  6. <el-option v-for="item in projectData" :key="item.id" :label="item.projectName" :value="item.id" />
  7. </el-select>
  8. </div>
  9. </template>
  10. <template #extra>
  11. <el-button hc-btn type="primary" @click="addClick">新增</el-button>
  12. </template>
  13. <hc-table :loading="tableLoading" :column="tableColumn" :datas="tableData" :index-style="{ width: 60 }" is-new>
  14. <template #certificateType="{ row }">{{ row.certificateType === 1 ? '个人证书' : '企业证书' }}</template>
  15. <template #isRegister="{ row }">
  16. <el-link v-if="row.isRegister === 0" type="primary" @click="registerRowClick(row)">注册</el-link>
  17. <span v-else>已注册</span>
  18. </template>
  19. <template #action="{ row }">
  20. <el-link type="warning" @click="editRowClick(row)">修改</el-link>
  21. <el-link type="danger" @click="delRowClick(row)">删除</el-link>
  22. </template>
  23. </hc-table>
  24. <template #action>
  25. <hc-pages :pages="searchForm" @change="pageChange" />
  26. </template>
  27. <!-- 查看 -->
  28. <hc-new-drawer v-model="isRowDrawer" to-id="hc-certificate-list">
  29. <HcListForm v-if="isRowDrawer" :info="tableRowItem" @close="isRowDrawer = false" />
  30. </hc-new-drawer>
  31. </hc-new-card>
  32. </template>
  33. <script setup>
  34. import { nextTick, onActivated, ref } from 'vue'
  35. import { getArrValue } from 'js-fast-way'
  36. import { delMessage } from '~uti/tools'
  37. import HcListForm from './modules/list/form.vue'
  38. import adminApi from '~api/certificate/admin'
  39. import mainApi from '~api/certificate/list'
  40. //激活
  41. onActivated(() => {
  42. getProjectData()
  43. })
  44. //项目列表
  45. const projectData = ref([])
  46. const getProjectData = async () => {
  47. const { data } = await adminApi.queryProjectList()
  48. const res = getArrValue(data)
  49. if (res.length > 0) {
  50. searchForm.value.projectId = res[0].id
  51. } else {
  52. searchForm.value.projectId = ''
  53. }
  54. projectData.value = res
  55. searchClick()
  56. }
  57. //搜索条件
  58. const searchForm = ref({ projectId: '', current: 1, size: 20, total: 0 })
  59. //搜索
  60. const searchClick = () => {
  61. searchForm.value.current = 1
  62. getTableData()
  63. }
  64. //分页
  65. const pageChange = ({ current, size }) => {
  66. searchForm.value.current = current
  67. searchForm.value.size = size
  68. getTableData()
  69. }
  70. //表格数据
  71. const tableColumn = ref([
  72. { key: 'certificateUserName', name: '证书所有者' },
  73. { key: 'certificateId', name: '证书ID/企业统一社会信用代码' },
  74. { key: 'certificateType', name: '证书类型' },
  75. { key: 'isRegister', name: '注册' },
  76. { key: 'action', name: '操作', width: 100, align: 'center' },
  77. ])
  78. const tableData = ref([])
  79. //获取表格数据
  80. const tableLoading = ref(true)
  81. const getTableData = async () => {
  82. tableData.value = []
  83. tableLoading.value = true
  84. const { error, code, data } = await mainApi.page({
  85. ...searchForm.value,
  86. total: null,
  87. })
  88. tableLoading.value = false
  89. if (!error && code === 200) {
  90. tableData.value = getArrValue(data['records'])
  91. searchForm.value.total = data['total']
  92. } else {
  93. tableData.value = []
  94. searchForm.value.total = 0
  95. }
  96. }
  97. const isRowDrawer = ref(false)
  98. const tableRowItem = ref({})
  99. //新增
  100. const addClick = () => {
  101. tableRowItem.value = {}
  102. nextTick(() => {
  103. isRowDrawer.value = true
  104. })
  105. }
  106. //修改
  107. const editRowClick = (row) => {
  108. tableRowItem.value = row
  109. nextTick(() => {
  110. isRowDrawer.value = true
  111. })
  112. }
  113. //注册
  114. const registerRowClick = async (row) => {
  115. const { error, code, msg } = await mainApi.goRegister({
  116. key: row.id,
  117. })
  118. if (!error && code === 200) {
  119. window.$message.success('操作成功')
  120. getTableData()
  121. } else {
  122. window.$message.error(msg ?? '操作失败')
  123. }
  124. }
  125. //删除
  126. const delRowClick = (row) => {
  127. delMessage(async () => {
  128. const { code, msg } = await mainApi.del(row.id)
  129. if (code === 200) {
  130. window.$message.success('删除成功')
  131. getTableData()
  132. } else {
  133. window.$message.error(msg ?? '删除失败')
  134. }
  135. })
  136. }
  137. </script>