OnlCgformHeadList.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 查询区域 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline">
  6. <a-row :gutter="24">
  7. <a-col :md="6" :sm="24">
  8. <a-form-item label="表名">
  9. <a-input placeholder="请输入表名" v-model="queryParam.tableName"></a-input>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="6" :sm="24">
  13. <a-form-item label="表类型">
  14. <j-dict-select-tag dictCode="cgform_table_type" v-model="queryParam.tableType"/>
  15. </a-form-item>
  16. </a-col>
  17. <a-col :md="6" :sm="24">
  18. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  19. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  20. <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
  21. </span>
  22. </a-col>
  23. </a-row>
  24. </a-form>
  25. </div>
  26. <!-- 操作按钮区域 -->
  27. <div class="table-operator">
  28. <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
  29. <a-button @click="doCgformButton" type="primary" icon="highlight" style="margin-left:8px">自定义按钮</a-button>
  30. <a-button @click="doEnhanceJs" type="primary" icon="strikethrough" style="margin-left:8px">JS增强</a-button>
  31. <a-button @click="doEnhanceSql" type="primary" icon="filter" v-has="'online:sql'" style="margin-left:8px">SQL增强</a-button>
  32. <a-button @click="doEnhanceJava" type="primary" icon="tool" style="margin-left:8px">Java增强</a-button>
  33. <a-button @click="importOnlineForm" type="primary" icon="database" style="margin-left:8px">从数据库导入表单</a-button>
  34. <a-button @click="goGenerateCode" v-has="'online:goGenerateCode'" type="primary" icon="database" style="margin-left:8px">代码生成</a-button>
  35. <a-dropdown v-if="selectedRowKeys.length > 0">
  36. <a-menu slot="overlay">
  37. <a-menu-item key="1" @click="batchDel">
  38. <a-icon type="delete"/>
  39. 删除
  40. </a-menu-item>
  41. </a-menu>
  42. <a-button style="margin-left: 8px"> 批量操作
  43. <a-icon type="down"/>
  44. </a-button>
  45. </a-dropdown>
  46. </div>
  47. <!-- table区域-begin -->
  48. <div>
  49. <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
  50. <i class="anticon anticon-info-circle ant-alert-icon"></i>
  51. 已选择
  52. <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>
  53. <a style="margin-left: 24px" @click="onClearSelected">清空</a>
  54. </div>
  55. <a-table
  56. ref="table"
  57. size="middle"
  58. bordered
  59. rowKey="id"
  60. :columns="columns"
  61. :dataSource="dataSource"
  62. :pagination="ipagination"
  63. :loading="loading"
  64. :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
  65. @change="handleTableChange">
  66. <template slot="action" slot-scope="text, record">
  67. <a @click="handleEdit(record)">编辑</a>
  68. <a-divider type="vertical"/>
  69. <a-dropdown>
  70. <a class="ant-dropdown-link">更多
  71. <a-icon type="down"/>
  72. </a>
  73. <a-menu slot="overlay">
  74. <a-menu-item v-if="record.isDbSynch!='Y'">
  75. <a @click="openSyncModal(record.id)">同步数据库</a>
  76. </a-menu-item>
  77. <template v-if="record.isDbSynch=='Y' && record.tableType !== 3">
  78. <a-menu-item>
  79. <a @click="goPageOnline(record)">功能测试</a>
  80. </a-menu-item>
  81. <a-menu-item>
  82. <a @click="handleOnlineUrlShow(record)">配置地址</a>
  83. </a-menu-item>
  84. </template>
  85. <a-menu-item>
  86. <a @click="copyConfig(record.id)">复制视图</a>
  87. </a-menu-item>
  88. <a-menu-item v-if="record.hascopy==1">
  89. <a @click="showMyCopyInfo(record.id)">配置视图</a>
  90. </a-menu-item>
  91. <a-menu-item>
  92. <a @click="handleRemoveRecord(record.id)">移除</a>
  93. </a-menu-item>
  94. <a-menu-item>
  95. <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
  96. <a>删除</a>
  97. </a-popconfirm>
  98. </a-menu-item>
  99. </a-menu>
  100. </a-dropdown>
  101. </template>
  102. <template slot="dbsync" slot-scope="text">
  103. <span v-if="text==='Y'" style="color:limegreen">已同步</span>
  104. <span v-if="text==='N'" style="color:red">未同步</span>
  105. </template>
  106. </a-table>
  107. </div>
  108. <!-- table区域-end -->
  109. <!-- 表单区域 -->
  110. <onl-cgform-head-modal ref="modalForm" @ok="modalFormOk"></onl-cgform-head-modal>
  111. <!-- 同步数据库提示框 -->
  112. <a-modal
  113. :width="500"
  114. :height="300"
  115. title="同步数据库"
  116. :visible="syncModalVisible"
  117. @cancel="handleCancleDbSync"
  118. style="top:5%;height: 95%;">
  119. <template slot="footer">
  120. <a-button @click="handleCancleDbSync">关闭</a-button>
  121. <a-button type="primary" :loading="syncLoading" @click="handleDbSync">
  122. 确定
  123. </a-button>
  124. </template>
  125. <a-radio-group v-model="synMethod">
  126. <a-radio style="display: block;width: 30px;height: 30px" value="normal">普通同步(保留表数据)</a-radio>
  127. <a-radio style="display: block;width: 30px;height: 30px" value="force">强制同步(删除表,重新生成)</a-radio>
  128. </a-radio-group>
  129. </a-modal>
  130. <!-- 提示online报表链接 -->
  131. <a-modal
  132. :title="onlineUrlTitle"
  133. :visible="onlineUrlVisible"
  134. @cancel="handleOnlineUrlClose">
  135. <template slot="footer">
  136. <a-button @click="handleOnlineUrlClose">关闭</a-button>
  137. <a-button type="primary" class="copy-this-text" :data-clipboard-text="onlineUrl" @click="onCopyUrl">复制</a-button>
  138. </template>
  139. <p>{{ onlineUrl }}</p>
  140. </a-modal>
  141. <enhance-js ref="ehjs"></enhance-js>
  142. <enhance-sql ref="ehsql"></enhance-sql>
  143. <enhance-java ref="ehjava"></enhance-java>
  144. <trans-db2-online ref="transd2o" @ok="transOk"></trans-db2-online>
  145. <code-generator ref="cg"></code-generator>
  146. <onl-cgform-button-list ref="btnList"></onl-cgform-button-list>
  147. </a-card>
  148. </template>
  149. <script>
  150. import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
  151. import { deleteAction, postAction } from '@/api/manage'
  152. import JDictSelectTag from '../../../../components/dict/JDictSelectTag.vue'
  153. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  154. import Clipboard from 'clipboard'
  155. import { filterObj } from '@/utils/util';
  156. export default {
  157. name: 'OnlCgformHeadList',
  158. mixins: [JeecgListMixin],
  159. components: {
  160. JDictSelectTag,
  161. },
  162. data() {
  163. return {
  164. description: 'Online表单开发管理页面',
  165. // 表头
  166. columns: [
  167. {
  168. title: '#',
  169. dataIndex: '',
  170. key: 'rowIndex',
  171. width: 60,
  172. align: 'center',
  173. customRender: function(t, r, index) {
  174. return parseInt(index) + 1
  175. }
  176. },
  177. {
  178. title: '表类型',
  179. align: 'center',
  180. dataIndex: 'tableType',
  181. customRender: (text) => {
  182. return filterDictText(this.tableTypeDictOptions, `${text}`)
  183. }
  184. },
  185. {
  186. title: '表名',
  187. align: 'center',
  188. dataIndex: 'tableName'
  189. },
  190. {
  191. title: '表描述',
  192. align: 'center',
  193. dataIndex: 'tableTxt'
  194. },
  195. {
  196. title: '版本',
  197. align: 'center',
  198. dataIndex: 'tableVersion'
  199. },
  200. {
  201. title: '同步数据库状态',
  202. align: 'center',
  203. dataIndex: 'isDbSynch',
  204. scopedSlots: { customRender: 'dbsync' }
  205. },
  206. {
  207. title: '操作',
  208. dataIndex: 'action',
  209. align: 'center',
  210. scopedSlots: { customRender: 'action' }
  211. }
  212. ],
  213. url: {
  214. list: '/online/cgform/head/list',
  215. delete: '/online/cgform/head/delete',
  216. deleteBatch: '/online/cgform/head/deleteBatch',
  217. doDbSynch: '/online/cgform/api/doDbSynch/',
  218. removeRecord: '/online/cgform/head/removeRecord',
  219. copyOnline: '/online/cgform/head/copyOnline'
  220. },
  221. tableTypeDictOptions: [],
  222. sexDictOptions: [],
  223. syncModalVisible: false,
  224. syncFormId: '',
  225. synMethod: 'normal',
  226. syncLoading: false,
  227. onlineUrlTitle: '',
  228. onlineUrlVisible: false,
  229. onlineUrl: '',
  230. selectedRowKeys: [],
  231. selectedRows: []
  232. }
  233. },
  234. created() {
  235. //初始化字典 - 表类型
  236. initDictOptions('cgform_table_type').then((res) => {
  237. if (res.success) {
  238. this.tableTypeDictOptions = res.result
  239. }
  240. })
  241. },
  242. methods: {
  243. doDbSynch(id) {
  244. postAction(this.url.doDbSynch + id, { synMethod: '1' }).then((res) => {
  245. if (res.success) {
  246. this.$message.success(res.message)
  247. this.loadData()
  248. } else {
  249. this.$message.warning(res.message)
  250. }
  251. })
  252. },
  253. getQueryParams() {
  254. //获取查询条件
  255. var param = Object.assign({}, this.queryParam, this.isorter ,this.filters);
  256. param.field = this.getQueryField();
  257. param.pageNo = this.ipagination.current;
  258. param.pageSize = this.ipagination.pageSize;
  259. param.copyType = 0;
  260. return filterObj(param);
  261. },
  262. handleCancleDbSync() {
  263. this.syncModalVisible = false
  264. },
  265. handleDbSync() {
  266. this.syncLoading = true
  267. postAction(this.url.doDbSynch + this.syncFormId + '/' + this.synMethod).then((res) => {
  268. this.syncModalVisible = false
  269. this.syncLoading = false
  270. if (res.success) {
  271. this.$message.success(res.message)
  272. this.loadData()
  273. } else {
  274. this.$message.warning(res.message)
  275. }
  276. })
  277. setTimeout(()=>{
  278. if(this.syncLoading){
  279. this.syncModalVisible = false
  280. this.syncLoading = false
  281. this.$message.success("网络延迟,已自动刷新!")
  282. this.loadData()
  283. }
  284. },10000)
  285. },
  286. openSyncModal(id) {
  287. this.syncModalVisible = true
  288. this.syncLoading = false
  289. this.syncFormId = id
  290. },
  291. goPageOnline(rd) {
  292. if(rd.isTree=='Y'){
  293. this.$router.push({ path: '/online/cgformTreeList/' + rd.id })
  294. }else{
  295. this.$router.push({ path: '/online/cgformList/' + rd.id })
  296. }
  297. },
  298. handleOnlineUrlClose() {
  299. this.onlineUrlTitle = ''
  300. this.onlineUrlVisible = false
  301. },
  302. handleOnlineUrlShow(record) {
  303. if(record.isTree=='Y'){
  304. this.onlineUrl = `/online/cgformTreeList/${record.id}`
  305. }else{
  306. this.onlineUrl = `/online/cgformList/${record.id}`
  307. }
  308. this.onlineUrlVisible = true
  309. this.onlineUrlTitle = '菜单链接[' + record.tableTxt + ']'
  310. },
  311. handleRemoveRecord(id) {
  312. let that = this
  313. this.$confirm({
  314. title: '确认要移除此记录?',
  315. onOk() {
  316. deleteAction(that.url.removeRecord, { id: id }).then((res) => {
  317. if (res.success) {
  318. that.$message.success('移除成功')
  319. that.loadData()
  320. } else {
  321. that.$message.warning(res.message)
  322. }
  323. })
  324. },
  325. onCancel() {
  326. }
  327. })
  328. },
  329. doEnhanceJs() {
  330. if (!this.selectedRowKeys || this.selectedRowKeys.length != 1) {
  331. this.$message.warning('请先选中一条记录')
  332. return
  333. }
  334. this.$refs.ehjs.show(this.selectedRowKeys[0])
  335. },
  336. doEnhanceSql() {
  337. if (!this.selectedRowKeys || this.selectedRowKeys.length != 1) {
  338. this.$message.warning('请先选中一条记录')
  339. return
  340. }
  341. this.$refs.ehsql.show(this.selectedRowKeys[0])
  342. },
  343. doEnhanceJava() {
  344. if (!this.selectedRowKeys || this.selectedRowKeys.length != 1) {
  345. this.$message.warning('请先选中一条记录')
  346. return
  347. }
  348. this.$refs.ehjava.show(this.selectedRowKeys[0])
  349. },
  350. doCgformButton() {
  351. if (!this.selectedRowKeys || this.selectedRowKeys.length != 1) {
  352. this.$message.warning('请先选中一条记录')
  353. return
  354. }
  355. this.$refs.btnList.show(this.selectedRowKeys[0])
  356. //this.$router.push({ path: '/online/cgformButton/' + this.selectedRowKeys[0] })
  357. },
  358. importOnlineForm() {
  359. this.$refs.transd2o.show()
  360. },
  361. transOk() {
  362. this.loadData()
  363. },
  364. goGenerateCode() {
  365. if (!this.selectedRowKeys || this.selectedRowKeys.length != 1) {
  366. this.$message.warning('请先选中一条记录')
  367. return
  368. }
  369. let row = this.selectedRows[0]
  370. if (!row.isDbSynch || row.isDbSynch == 'N') {
  371. this.$message.warning('请先同步数据库!')
  372. return
  373. }
  374. if (row.tableType == 3) {
  375. this.$message.warning('请选中该表对应的主表生成代码')
  376. return
  377. }
  378. this.$refs.cg.show(this.selectedRowKeys[0])
  379. },
  380. onSelectChange(keys, rows) {
  381. this.selectedRowKeys = keys
  382. this.selectedRows = rows
  383. },
  384. onCopyUrl(){
  385. var clipboard = new Clipboard('.copy-this-text')
  386. clipboard.on('success', () => {
  387. clipboard.destroy()
  388. this.$message.success('复制成功')
  389. this.handleOnlineUrlClose()
  390. })
  391. clipboard.on('error', () => {
  392. this.$message.error('该浏览器不支持自动复制')
  393. clipboard.destroy()
  394. })
  395. },
  396. showMyCopyInfo(id){
  397. this.$router.push({ path: '/online/copyform/' + id })
  398. },
  399. copyConfig(id){
  400. postAction(`${this.url.copyOnline}?code=${id}`).then(res=>{
  401. if(res.success){
  402. this.$message.success("复制成功")
  403. this.loadData()
  404. }else{
  405. this.$message.error("复制失败>>"+res.message)
  406. }
  407. })
  408. }
  409. }
  410. }
  411. </script>
  412. <style lang="less">
  413. .ant-card-body .table-operator {
  414. margin-bottom: 18px;
  415. }
  416. .ant-table-tbody .ant-table-row td {
  417. padding-top: 15px;
  418. padding-bottom: 15px;
  419. }
  420. .anty-row-operator button {
  421. margin: 0 5px
  422. }
  423. .ant-btn-danger {
  424. background-color: #ffffff
  425. }
  426. .ant-modal-cust-warp {
  427. height: 100%
  428. }
  429. .ant-modal-cust-warp .ant-modal-body {
  430. height: calc(100% - 110px) !important;
  431. overflow-y: auto
  432. }
  433. .ant-modal-cust-warp .ant-modal-content {
  434. height: 90% !important;
  435. overflow-y: hidden
  436. }
  437. .valid-error-cust{
  438. .ant-select-selection{
  439. border:2px solid #f5222d;
  440. }
  441. }
  442. </style>