param.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <template>
  2. <hc-card>
  3. <template #header>
  4. <div class="w-60">
  5. <hc-search-input v-model="searchForm.paramName" placeholder="请输入参数名称关键词" @search="searchClick" />
  6. </div>
  7. </template>
  8. <template #extra>
  9. <el-button hc-btn type="primary" @click="addClick">新增</el-button>
  10. <el-button hc-btn type="danger" @click="delClick">删除</el-button>
  11. </template>
  12. <hc-table
  13. ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading"
  14. is-check :check-style="{ width: 29 }" :index-style="{ width: 60 }"
  15. @selection-change="tableCheckChange"
  16. >
  17. <template #action="{ row }">
  18. <el-link type="warning" @click="editRowClick(row)">修改</el-link>
  19. <el-link v-del-com:[delRowClick]="row" type="danger">删除</el-link>
  20. </template>
  21. </hc-table>
  22. <template #action>
  23. <hc-pages :pages="searchForm" @change="pageChange" />
  24. </template>
  25. <!-- 新增/修改 -->
  26. <hc-dialog v-model="isDialogShow" widths="800px" is-footer-center :title="dialogTitle" @close="dialogClose">
  27. <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto">
  28. <el-form-item label="参数名称:" prop="paramName">
  29. <el-input v-model="formModel.paramName" clearable placeholder="请输入参数名称" />
  30. </el-form-item>
  31. <el-form-item label="参数键名:" prop="paramKey">
  32. <el-input v-model="formModel.paramKey" clearable placeholder="请输入参数键名" />
  33. </el-form-item>
  34. <el-form-item label="参数键值:" prop="paramValue">
  35. <el-input v-model="formModel.paramValue" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入参数键值" />
  36. </el-form-item>
  37. </el-form>
  38. <template #footer>
  39. <el-button hc-btn @click="dialogClose">取消</el-button>
  40. <el-button hc-btn type="primary" :loading="submitLoading" @click="dialogSubmit">提交</el-button>
  41. </template>
  42. </hc-dialog>
  43. </hc-card>
  44. </template>
  45. <script setup>
  46. import { nextTick, onActivated, ref } from 'vue'
  47. import { arrToId, formValidate, getArrValue } from 'js-fast-way'
  48. import { reloadPage } from '~uti/tools'
  49. import { HcDelMsg } from 'hc-vue3-ui'
  50. import mainApi from '~api/system/param'
  51. //激活
  52. onActivated(() => {
  53. searchForm.value.current = 1
  54. getTableData()
  55. })
  56. //搜索表单
  57. const searchForm = ref({ current: 1, size: 30, total: 0 })
  58. //搜索
  59. const searchClick = () => {
  60. searchForm.value.current = 1
  61. getTableData()
  62. }
  63. //分页
  64. const pageChange = ({ current, size }) => {
  65. searchForm.value.current = current
  66. searchForm.value.size = size
  67. getTableData()
  68. }
  69. //表格数据
  70. const tableRef = ref(null)
  71. const tableColumn = ref([
  72. { key: 'paramName', name: '参数名称' },
  73. { key: 'paramKey', name: '参数键名' },
  74. { key: 'paramValue', name: '参数键值' },
  75. { key: 'action', name: '操作', width: 100, align: 'center' },
  76. ])
  77. //获取表格数据
  78. const tableLoading = ref(true)
  79. const tableData = ref([{}])
  80. const getTableData = async () => {
  81. tableData.value = []
  82. tableLoading.value = true
  83. const { error, code, data } = await mainApi.page({
  84. ...searchForm.value,
  85. total: null,
  86. })
  87. tableLoading.value = false
  88. if (!error && code === 200) {
  89. tableData.value = getArrValue(data['records'])
  90. searchForm.value.total = data['total']
  91. } else {
  92. tableData.value = []
  93. searchForm.value.total = 0
  94. }
  95. }
  96. //表格被选择
  97. const tableCheckKeys = ref([])
  98. const tableCheckChange = (rows) => {
  99. tableCheckKeys.value = rows
  100. }
  101. //新增/修改 弹窗
  102. const isDialogShow = ref(false)
  103. const dialogTitle = ref('')
  104. //表单
  105. const formRef = ref(null)
  106. const formModel = ref({})
  107. const formRules = {
  108. paramName: {
  109. required: true,
  110. trigger: 'blur',
  111. message: '请输入参数名称',
  112. },
  113. paramKey: {
  114. required: true,
  115. trigger: 'blur',
  116. message: '请输入参数键名',
  117. },
  118. paramValue: {
  119. required: true,
  120. trigger: 'blur',
  121. message: '请输入参数键值',
  122. },
  123. }
  124. //新增
  125. const addClick = () => {
  126. dialogTitle.value = '新增参数'
  127. formModel.value = {}
  128. //显示表单弹窗
  129. nextTick(() => {
  130. isDialogShow.value = true
  131. })
  132. }
  133. //修改
  134. const editRowClick = (row) => {
  135. formModel.value = {}
  136. dialogTitle.value = '修改参数'
  137. formModel.value = { ...row }
  138. //显示表单弹窗
  139. nextTick(() => {
  140. isDialogShow.value = true
  141. })
  142. }
  143. //删除
  144. const delRowClick = async ({ item }, resolve) => {
  145. const { code, msg } = await mainApi.del(item.id)
  146. if (code === 200) {
  147. resolve()
  148. window.$message.success('删除成功')
  149. reloadPage()
  150. } else {
  151. resolve()
  152. window.$message.error(msg ?? '删除失败')
  153. }
  154. }
  155. //批量删除
  156. const delClick = () => {
  157. const rows = tableCheckKeys.value
  158. if (rows.length <= 0) {
  159. window.$message.warning('请选择要删除的数据')
  160. return false
  161. }
  162. //确认删除
  163. HcDelMsg(async (resolve) => {
  164. //发起请求
  165. const ids = arrToId(rows)
  166. const { code, msg } = await mainApi.del(ids)
  167. //关闭弹窗的回调
  168. resolve()
  169. //处理结果
  170. if (code === 200) {
  171. window.$message.success('删除成功')
  172. reloadPage()
  173. } else {
  174. window.$message.error(msg ?? '删除失败')
  175. }
  176. })
  177. }
  178. //提交表单
  179. const submitLoading = ref(false)
  180. const dialogSubmit = async () => {
  181. const formRes = await formValidate(formRef.value)
  182. if (!formRes) return false
  183. submitLoading.value = true
  184. //发起请求
  185. const { error, code, msg } = await mainApi.submit(formModel.value)
  186. submitLoading.value = false
  187. if (!error && code === 200) {
  188. window?.$message?.success('操作成功')
  189. reloadPage()
  190. } else {
  191. window?.$message?.error(msg ?? '操作失败')
  192. }
  193. }
  194. //关闭弹窗
  195. const dialogClose = () => {
  196. isDialogShow.value = false
  197. submitLoading.value = false
  198. formModel.value = {}
  199. }
  200. </script>