CustomForm.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. <template>
  2. <a-card :bordered="false">
  3. <div v-show="visible">
  4. <div class="table-page-search-wrapper" @keyup.enter="handleEnter">
  5. <a-form layout="inline">
  6. <a-row :gutter="48">
  7. <a-col :md="6" :sm="24">
  8. <a-form-item label="模板名称">
  9. <a-input v-model="queryParam.name" placeholder="请输入模板名称" />
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="6" :sm="24">
  13. <a-form-item label="所属部门">
  14. <a-tree-select v-model="queryParam.deptId" style="width: 100%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" placeholder="请选择" tree-default-expand-all>
  15. </a-tree-select>
  16. </a-form-item>
  17. </a-col>
  18. <a-col :md="6 || 24" :sm="24">
  19. <span class="table-page-search-submitButtons">
  20. <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
  21. <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
  22. </span>
  23. </a-col>
  24. </a-row>
  25. </a-form>
  26. </div>
  27. <div class="table-operator" style="margin-bottom: 8px;">
  28. <a-row>
  29. <a-col :md="16">
  30. <a-button type="primary" icon="plus" @click="handleAdd()">新增</a-button>
  31. <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0 ">
  32. <a-menu slot="overlay">
  33. <a-popconfirm title="是否要删除所选数据?" @confirm="batchDelete()">
  34. <a-menu-item key="1"><a-icon type="delete" /><a>删除</a></a-menu-item>
  35. </a-popconfirm>
  36. </a-menu>
  37. <a-button style="margin-left: 8px">
  38. 批量操作 <a-icon type="down" />
  39. </a-button>
  40. </a-dropdown>
  41. </a-col>
  42. </a-row>
  43. </div>
  44. <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" showPagination="auto">
  45. <span slot="action" slot-scope="record">
  46. <template>
  47. <a @click="handleView(record)">查看</a>
  48. <!-- <operation-button @click="handleEdit(record)">修改</operation-button> -->
  49. <operation-button @click="handleSubmit(record)">填报</operation-button>
  50. <operation-button :type="2" title="是否要删除该条数据?" @confirm="batchDelete(record.id)">删除</operation-button>
  51. </template>
  52. </span>
  53. </s-table>
  54. </div>
  55. <base-form ref="baseModal" @ok="handleOk" />
  56. <detail ref="detailModal" @ok="handleOk" />
  57. <SubmitForm ref="submitForm" @ok="handleOk" />
  58. </a-card>
  59. </template>
  60. <script>
  61. import { STable, Ellipsis } from '@/components'
  62. import BaseForm from './modules/BaseForm'
  63. import SubmitForm from './modules/SubmitForm'
  64. import Detail from './modules/Detail'
  65. import { getCustomFormPage, deleteCustomForms, fetchCustomForm, getCustomTree } from '@/api/custom/form'
  66. export default {
  67. name: 'CustomFormList',
  68. components: {
  69. STable,
  70. Ellipsis,
  71. BaseForm,
  72. Detail,
  73. SubmitForm,
  74. },
  75. data() {
  76. return {
  77. visible: true,
  78. treeData: [],
  79. // 查询参数
  80. queryParam: {},
  81. // 表头
  82. columns: [
  83. {
  84. title: '序号',
  85. dataIndex: 'index',
  86. customRender: (text, record, index) => {
  87. return `${
  88. (this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1
  89. }`
  90. },
  91. },
  92. {
  93. title: '表单名称',
  94. dataIndex: 'name',
  95. },
  96. {
  97. title: '模板分类',
  98. dataIndex: 'category',
  99. customRender: (text, record, index) => {
  100. return this.BaseTool.Table.getMapText(this.categoryMap, text)
  101. },
  102. },
  103. {
  104. title: '表单类型',
  105. dataIndex: 'type',
  106. customRender: (text, record, index) => {
  107. return this.childrenMaps[record.category][text]
  108. },
  109. },
  110. {
  111. title: '备注',
  112. dataIndex: 'remark',
  113. },
  114. {
  115. title: '创建人',
  116. dataIndex: 'createdUserName',
  117. },
  118. {
  119. title: '创建时间',
  120. dataIndex: 'createdTime',
  121. },
  122. {
  123. title: '状态',
  124. fixed: 'right',
  125. dataIndex: 'status',
  126. },
  127. {
  128. title: '操作',
  129. key: 'action',
  130. width: '200px',
  131. fixed: 'right',
  132. align: 'center',
  133. scopedSlots: { customRender: 'action' },
  134. },
  135. ],
  136. // 下拉框map
  137. // 加载数据方法 必须为 Promise 对象
  138. loadData: (parameter) => {
  139. parameter = {
  140. ...parameter,
  141. ...this.queryParam,
  142. dataScope: {
  143. sortBy: 'desc',
  144. sortName: 'created_time',
  145. },
  146. }
  147. return getCustomFormPage(Object.assign(parameter, this.queryParam)).then((res) => {
  148. return res.data
  149. })
  150. },
  151. selectedRowKeys: [],
  152. selectedRows: [],
  153. options: {
  154. alert: {
  155. show: true,
  156. clear: () => {
  157. this.selectedRowKeys = []
  158. },
  159. },
  160. rowSelection: {
  161. selectedRowKeys: this.selectedRowKeys,
  162. onChange: this.onSelectChange,
  163. },
  164. },
  165. optionAlertShow: false,
  166. categoryMap: {},
  167. childrenMaps: [],
  168. }
  169. },
  170. created() {
  171. // 下拉框map
  172. this.categoryMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.CATEGORY_TYPE)
  173. this.DictCache.getChildrenList(this.DictCache.TYPE.CATEGORY_TYPE).forEach((item) => {
  174. this.childrenMaps[item.value] = this.DictCache.getLabelByValueMapByType(item.code)
  175. })
  176. this.tableOption()
  177. getCustomTree().then((res) => {
  178. this.treeData = this.setTree(res.data)
  179. })
  180. },
  181. methods: {
  182. tableOption() {
  183. if (!this.optionAlertShow) {
  184. this.options = {
  185. alert: {
  186. show: true,
  187. clear: () => {
  188. this.selectedRowKeys = []
  189. },
  190. },
  191. rowSelection: {
  192. selectedRowKeys: this.selectedRowKeys,
  193. onChange: this.onSelectChange,
  194. getCheckboxProps: (record) => ({
  195. props: {
  196. disabled: false,
  197. name: record.id,
  198. },
  199. }),
  200. },
  201. }
  202. this.optionAlertShow = true
  203. } else {
  204. this.options = {
  205. alert: false,
  206. rowSelection: null,
  207. }
  208. this.optionAlertShow = false
  209. }
  210. },
  211. setTree(list) {
  212. return list.map((item) => {
  213. return {
  214. title: item.title,
  215. key: item.id,
  216. value: item.id,
  217. children: item.children ? this.setTree(item.children) : [],
  218. }
  219. })
  220. },
  221. batchDelete(id) {
  222. let ids = []
  223. if (this.BaseTool.String.isBlank(id)) {
  224. const length = this.selectedRows.length
  225. if (length === 0) {
  226. this.$message.info('请选择要删除的记录')
  227. return
  228. }
  229. ids = this.selectedRows.map((item) => item.id)
  230. } else {
  231. ids = [id]
  232. }
  233. deleteCustomForms(ids).then((res) => {
  234. this.$message.info('删除成功')
  235. this.handleOk()
  236. this.$refs.table.clearSelected()
  237. })
  238. },
  239. handleAdd() {
  240. this.visible = false
  241. const modal = this.$refs.baseModal
  242. modal.base()
  243. },
  244. handleEdit(record) {
  245. this.visible = false
  246. fetchCustomForm({ id: record.id }).then((res) => {
  247. const modal = this.$refs.baseModal
  248. modal.base(res.data)
  249. })
  250. },
  251. handleView(record) {
  252. this.visible = false
  253. fetchCustomForm({ id: record.id }).then((res) => {
  254. const modal = this.$refs.detailModal
  255. modal.base(res.data)
  256. })
  257. },
  258. handleSubmit(record) {
  259. this.visible = false
  260. fetchCustomForm({ id: record.id }).then((res) => {
  261. const modal = this.$refs.submitForm
  262. modal.base(res.data)
  263. })
  264. },
  265. handleOk(values) {
  266. this.visible = true
  267. this.$refs.table.refresh()
  268. },
  269. onSelectChange(selectedRowKeys, selectedRows) {
  270. this.selectedRowKeys = selectedRowKeys
  271. this.selectedRows = selectedRows
  272. },
  273. resetSearchForm() {
  274. this.queryParam = {}
  275. this.$refs.table.refresh(true)
  276. },
  277. handleEnter() {
  278. this.$refs.table.refresh(true)
  279. },
  280. },
  281. }
  282. </script>