|
|
@@ -0,0 +1,240 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-card>
|
|
|
+ <a-form layout="inline" @keyup.enter.native="query">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="表单名称">
|
|
|
+ <a-input placeholder="请输入表单名称" v-model="queryParam.text" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="表名">
|
|
|
+ <a-input placeholder="请输入表名" v-model="queryParam.businessTable" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <span style="float: left;overflow: hidden;">
|
|
|
+ <a-button type="primary" @click="query" icon="search">查询</a-button>
|
|
|
+ <a-button
|
|
|
+ type="primary"
|
|
|
+ @click="searchReset"
|
|
|
+ icon="reload"
|
|
|
+ style="margin-left: 8px"
|
|
|
+ >重置</a-button>
|
|
|
+ </span>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-card style="margin-top:5px">
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-button @click="editFormsOnline" type="primary">在线编辑表单</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <!-- 数据表 -->
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-table
|
|
|
+ ref="table"
|
|
|
+ bordered
|
|
|
+ :columns="columns"
|
|
|
+ :dataSource="planList"
|
|
|
+ :pagination="pagination"
|
|
|
+ :rowKey="record => record.id"
|
|
|
+ @change="handleTableChange"
|
|
|
+ style="height:100%;margin-top:5px"
|
|
|
+ >
|
|
|
+ <span slot="type" slot-scope="text, record">
|
|
|
+ <a-tag color="cyan" v-if="record.type=='1'">PC端</a-tag>
|
|
|
+ <a-tag color="blue" v-if="record.type=='2'">钉钉端</a-tag>
|
|
|
+ </span>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <span slot="operationSlot" slot-scope="text, record">
|
|
|
+ <a href="javascript:void(0);" @click="edit(record)">编辑</a>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+
|
|
|
+ <a-popconfirm
|
|
|
+ title="确定删除吗？"
|
|
|
+ ok-text="是"
|
|
|
+ cancel-text="否"
|
|
|
+ @confirm="deleteRow(record)"
|
|
|
+ >
|
|
|
+ <a href="javascript:void(0);" class="delRed">删除</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <!-- 表单编辑器 -->
|
|
|
+ <a-drawer
|
|
|
+ title="编辑器"
|
|
|
+ width="100%"
|
|
|
+ style="top:0%;height: 100%;"
|
|
|
+ :visible="editorVisible"
|
|
|
+ @close="editFromClose"
|
|
|
+ >
|
|
|
+ <iframe
|
|
|
+ :src="editorJumpUrl"
|
|
|
+ width="100%"
|
|
|
+ height="800"
|
|
|
+ frameborder="0"
|
|
|
+ scrolling="auto"
|
|
|
+ id="iframename"
|
|
|
+ name="iframename"
|
|
|
+ ></iframe>
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ position: 'absolute',
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ width: '100%',
|
|
|
+ borderTop: '1px solid #e9e9e9',
|
|
|
+ padding: '10px 16px',
|
|
|
+ background: '#fff',
|
|
|
+ textAlign: 'right',
|
|
|
+ zIndex: 1,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <a-popconfirm placement="leftBottom" title="是否关闭？" ok-text="是" cancel-text="否" @confirm="editFromClose">
|
|
|
+ <a-button :style="{ marginRight: '8px' }">关闭</a-button>
|
|
|
+ </a-popconfirm>
|
|
|
+ </div>
|
|
|
+ </a-drawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getPageList, scheduleDelete } from '@/api/api'
|
|
|
+import { getEditorJumpUrl } from '../../../../url.config'
|
|
|
+import notification from 'ant-design-vue/es/notification'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ queryParam: {
|
|
|
+ pageNo: 1
|
|
|
+ },
|
|
|
+ planList: [], // 列表数据
|
|
|
+ pagination: {
|
|
|
+ total: 0,
|
|
|
+ current: 0,
|
|
|
+ pageSize: 0
|
|
|
+ }, // 分页
|
|
|
+ // 表头
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '表单名称',
|
|
|
+ dataIndex: 'text',
|
|
|
+ align: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '表名',
|
|
|
+ dataIndex: 'businessTable',
|
|
|
+ align: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '表单类型',
|
|
|
+ dataIndex: 'type',
|
|
|
+ align: 'left',
|
|
|
+ scopedSlots: { customRender: 'type' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '步骤描述',
|
|
|
+ dataIndex: 'stepMemo',
|
|
|
+ align: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '创建时间',
|
|
|
+ dataIndex: 'createTime',
|
|
|
+ align: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'operation',
|
|
|
+ scopedSlots: { customRender: 'operationSlot' },
|
|
|
+ align: 'left'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ editorJumpUrl: '',
|
|
|
+ editorVisible: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getPageList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //查询按钮
|
|
|
+ query() {
|
|
|
+ this.queryParam.pageNo = 1
|
|
|
+ this.getPageList()
|
|
|
+ },
|
|
|
+ //重置按钮
|
|
|
+ searchReset() {
|
|
|
+ this.queryParam = { pageNo: 1 }
|
|
|
+ },
|
|
|
+ //初始查询
|
|
|
+ getPageList() {
|
|
|
+ getPageList(this.queryParam).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.planList = res.result.records
|
|
|
+ this.pagination = {
|
|
|
+ // 分页信息赋值
|
|
|
+ total: res.result.total,
|
|
|
+ current: res.result.current,
|
|
|
+ pageSize: res.result.size
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 分页、排序、筛选变化时触发
|
|
|
+ handleTableChange(pagination, filters, sorter) {
|
|
|
+ this.queryParam.pageNo = pagination.current
|
|
|
+ this.getPageList()
|
|
|
+ },
|
|
|
+ edit(record) {
|
|
|
+ this.editorVisible = true
|
|
|
+ // window.open(getEditorJumpUrl()+'/#/formDesign?tableName='+r.businessTable, '_blank')//测试地址
|
|
|
+ this.editorJumpUrl = getEditorJumpUrl() + '/#/formDesign?tableName=' + record.businessTable
|
|
|
+ },
|
|
|
+ //删除
|
|
|
+ deleteRow(record) {
|
|
|
+ scheduleDelete({ id: record.id }).then(response => {
|
|
|
+ if (response.success) {
|
|
|
+ notification.success({
|
|
|
+ message: '删除成功'
|
|
|
+ })
|
|
|
+ this.getPageList()
|
|
|
+ } else {
|
|
|
+ notification.success({
|
|
|
+ message: '删除失败',
|
|
|
+ description: response.message
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ editFormsOnline() {
|
|
|
+ //在线编辑表单
|
|
|
+ this.editorVisible = true
|
|
|
+ this.editorJumpUrl = getEditorJumpUrl() + '/#/formDesign'
|
|
|
+ },
|
|
|
+ //编辑表单弹框关闭按钮
|
|
|
+ editFromClose() {
|
|
|
+ this.editorVisible = false
|
|
|
+ this.editorJumpUrl = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
liangyan0105