|
|
@@ -1,355 +1,399 @@
|
|
|
<template>
|
|
|
- <div class="flow-flowForm-container">
|
|
|
- <el-card shadow="hover">
|
|
|
- <div class="flow-flowForm-search mb15">
|
|
|
- <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="100px">
|
|
|
- <el-row>
|
|
|
- <el-col :span="8" class="colBlock">
|
|
|
- <el-form-item label="表单名" prop="name">
|
|
|
- <el-input
|
|
|
- v-model="tableData.param.name"
|
|
|
- placeholder="请输入表单名"
|
|
|
- clearable
|
|
|
- @keyup.enter.native="flowFormList"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8" class="colBlock">
|
|
|
- <el-form-item label="状态" prop="status">
|
|
|
- <el-select v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 160px">
|
|
|
- <el-option
|
|
|
- v-for="dict in flow_form_status"
|
|
|
- :key="dict.value"
|
|
|
- :label="dict.label"
|
|
|
- :value="dict.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8" :class="!showAll ? 'colBlock' : 'colNone'">
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="flowFormList"><el-icon><ele-Search /></el-icon>搜索</el-button>
|
|
|
- <el-button @click="resetQuery(queryRef)"><el-icon><ele-Refresh /></el-icon>重置</el-button>
|
|
|
- <el-button type="primary" link @click="toggleSearch">
|
|
|
- {{ word }}
|
|
|
- <el-icon v-show="showAll"><ele-ArrowUp/></el-icon>
|
|
|
- <el-icon v-show="!showAll"><ele-ArrowDown /></el-icon>
|
|
|
- </el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
|
|
|
- <el-form-item label="创建时间" prop="createdAt">
|
|
|
- <el-date-picker
|
|
|
- clearable style="width: 200px"
|
|
|
- v-model="tableData.param.createdAt"
|
|
|
- format="YYYY-MM-DD HH:mm:ss"
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
- type="datetime"
|
|
|
- placeholder="选择创建时间"
|
|
|
- ></el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="flowFormList"><el-icon><ele-Search /></el-icon>搜索</el-button>
|
|
|
- <el-button @click="resetQuery(queryRef)"><el-icon><ele-Refresh /></el-icon>重置</el-button>
|
|
|
- <el-button type="primary" link @click="toggleSearch">
|
|
|
- {{ word }}
|
|
|
- <el-icon v-show="showAll"><ele-ArrowUp/></el-icon>
|
|
|
- <el-icon v-show="!showAll"><ele-ArrowDown /></el-icon>
|
|
|
- </el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- <el-row :gutter="10" class="mb8">
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- @click="handleAdd"
|
|
|
- v-auth="'api/v1/flow/flowForm/add'"
|
|
|
- ><el-icon><ele-Plus /></el-icon>新增</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="success"
|
|
|
- :disabled="single"
|
|
|
- @click="handleUpdate(null)"
|
|
|
- v-auth="'api/v1/flow/flowForm/edit'"
|
|
|
- ><el-icon><ele-Edit /></el-icon>修改</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- :disabled="multiple"
|
|
|
- @click="handleDelete(null)"
|
|
|
- v-auth="'api/v1/flow/flowForm/delete'"
|
|
|
- ><el-icon><ele-Delete /></el-icon>删除</el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <el-table v-loading="loading" :data="tableData.data" @selection-change="handleSelectionChange">
|
|
|
- <el-table-column type="selection" width="55" align="center" />
|
|
|
- <el-table-column label="主键" align="center" prop="id"
|
|
|
- min-width="150px"
|
|
|
- />
|
|
|
- <el-table-column label="表单名" align="center" prop="name"
|
|
|
- min-width="150px"
|
|
|
- />
|
|
|
- <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat"
|
|
|
- min-width="150px"
|
|
|
- />
|
|
|
- <el-table-column label="部署情况" align="center" prop="status" :formatter="isPubFormat"
|
|
|
- min-width="150px"
|
|
|
- />
|
|
|
- <el-table-column label="备注" align="center" prop="remark"
|
|
|
- min-width="150px"
|
|
|
- />
|
|
|
- <el-table-column label="创建时间" align="center" prop="createdAt"
|
|
|
- min-width="150px"
|
|
|
- >
|
|
|
- <template #default="scope">
|
|
|
- <span>{{ proxy.parseTime(scope.row.createdAt, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="创建人" align="center" prop="createdBy"
|
|
|
- min-width="150px"
|
|
|
- />
|
|
|
- <el-table-column label="操作" align="center" class-name="small-padding" min-width="200px" fixed="right">
|
|
|
- <template #default="scope">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- link
|
|
|
- @click="handleView(scope.row)"
|
|
|
- v-auth="'api/v1/flow/flowForm/get'"
|
|
|
- ><el-icon><ele-View /></el-icon>详情</el-button>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- link
|
|
|
- @click="handleUpdate(scope.row)"
|
|
|
- v-auth="'api/v1/flow/flowForm/edit'"
|
|
|
- ><el-icon><ele-EditPen /></el-icon>修改</el-button>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- link
|
|
|
- @click="handleGen(scope.row)"
|
|
|
- v-auth="'api/v1/flow/flowForm/gen'"
|
|
|
- ><el-icon><ele-Position /></el-icon>部署表单</el-button>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- link
|
|
|
- @click="handleDelete(scope.row)"
|
|
|
- v-auth="'api/v1/flow/flowForm/delete'"
|
|
|
- ><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <pagination
|
|
|
- v-show="tableData.total>0"
|
|
|
- :total="tableData.total"
|
|
|
- v-model:page="tableData.param.pageNum"
|
|
|
- v-model:limit="tableData.param.pageSize"
|
|
|
- @pagination="flowFormList"
|
|
|
- />
|
|
|
- </el-card>
|
|
|
- <ApiV1FlowFlowFormDetail
|
|
|
- ref="detailRef"
|
|
|
- :statusOptions="flow_form_status"
|
|
|
- @flowFormList="flowFormList"
|
|
|
- ></ApiV1FlowFlowFormDetail>
|
|
|
- </div>
|
|
|
+ <div class="flow-flowForm-container">
|
|
|
+ <el-card shadow="hover">
|
|
|
+ <div class="flow-flowForm-search mb15">
|
|
|
+ <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="100px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8" class="colBlock">
|
|
|
+ <el-form-item label="表单名" prop="name">
|
|
|
+ <el-input v-model="tableData.param.name" placeholder="请输入表单名" clearable @keyup.enter.native="flowFormList" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="colBlock">
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-select v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 160px">
|
|
|
+ <el-option v-for="dict in flow_form_status" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" :class="!showAll ? 'colBlock' : 'colNone'">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="flowFormList"
|
|
|
+ ><el-icon><ele-Search /></el-icon>搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="resetQuery(queryRef)"
|
|
|
+ ><el-icon><ele-Refresh /></el-icon>重置</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" link @click="toggleSearch">
|
|
|
+ {{ word }}
|
|
|
+ <el-icon v-show="showAll"><ele-ArrowUp /></el-icon>
|
|
|
+ <el-icon v-show="!showAll"><ele-ArrowDown /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
|
|
|
+ <el-form-item label="创建时间" prop="createdAt">
|
|
|
+ <el-date-picker
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ v-model="tableData.param.createdAt"
|
|
|
+ format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="选择创建时间"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="flowFormList"
|
|
|
+ ><el-icon><ele-Search /></el-icon>搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="resetQuery(queryRef)"
|
|
|
+ ><el-icon><ele-Refresh /></el-icon>重置</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" link @click="toggleSearch">
|
|
|
+ {{ word }}
|
|
|
+ <el-icon v-show="showAll"><ele-ArrowUp /></el-icon>
|
|
|
+ <el-icon v-show="!showAll"><ele-ArrowDown /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" @click="handleAdd" v-auth="'api/v1/flow/flowForm/add'"
|
|
|
+ ><el-icon><ele-Plus /></el-icon>新增</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="success" :disabled="single" @click="handleUpdate(null)" v-auth="'api/v1/flow/flowForm/edit'"
|
|
|
+ ><el-icon><ele-Edit /></el-icon>修改</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="danger" :disabled="multiple" @click="handleDelete(null)" v-auth="'api/v1/flow/flowForm/delete'"
|
|
|
+ ><el-icon><ele-Delete /></el-icon>删除</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="info" @click="handleImport"
|
|
|
+ ><el-icon><ele-Upload /></el-icon>导入</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" :disabled="multiple" @click="handleExport"
|
|
|
+ ><el-icon><ele-Download /></el-icon>导出</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-table v-loading="loading" :data="tableData.data" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="主键" align="center" prop="id" min-width="150px" />
|
|
|
+ <el-table-column label="表单名" align="center" prop="name" min-width="150px" />
|
|
|
+ <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" min-width="150px" />
|
|
|
+ <el-table-column label="部署情况" align="center" prop="status" :formatter="isPubFormat" min-width="150px" />
|
|
|
+ <el-table-column label="备注" align="center" prop="remark" min-width="150px" />
|
|
|
+ <el-table-column label="创建时间" align="center" prop="createdAt" min-width="150px">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ proxy.parseTime(scope.row.createdAt, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="创建人" align="center" prop="createdBy" min-width="150px" />
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding" min-width="200px" fixed="right">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button type="primary" link @click="handleView(scope.row)" v-auth="'api/v1/flow/flowForm/get'"
|
|
|
+ ><el-icon><ele-View /></el-icon>详情</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" link @click="handleUpdate(scope.row)" v-auth="'api/v1/flow/flowForm/edit'"
|
|
|
+ ><el-icon><ele-EditPen /></el-icon>修改</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" link @click="handleGen(scope.row)" v-auth="'api/v1/flow/flowForm/gen'"
|
|
|
+ ><el-icon><ele-Position /></el-icon>部署表单</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" link @click="handleDelete(scope.row)" v-auth="'api/v1/flow/flowForm/delete'"
|
|
|
+ ><el-icon><ele-DeleteFilled /></el-icon>删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ v-show="tableData.total > 0"
|
|
|
+ :total="tableData.total"
|
|
|
+ v-model:page="tableData.param.pageNum"
|
|
|
+ v-model:limit="tableData.param.pageSize"
|
|
|
+ @pagination="flowFormList"
|
|
|
+ />
|
|
|
+ </el-card>
|
|
|
+ <ApiV1FlowFlowFormDetail ref="detailRef" :statusOptions="flow_form_status" @flowFormList="flowFormList"></ApiV1FlowFlowFormDetail>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
-import {toRefs, reactive, onMounted, ref, defineComponent, computed,getCurrentInstance,toRaw} from 'vue';
|
|
|
-import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
|
|
|
+import { computed, defineComponent, getCurrentInstance, onMounted, reactive, ref, toRaw, toRefs, watch } from 'vue'
|
|
|
+import { ElMessage, ElMessageBox, FormInstance } from 'element-plus'
|
|
|
+import { addFlowForm, delFlowForm, genFlowForm, getFlowForm, listFlowForm } from '/@/api/flow/flowForm'
|
|
|
import {
|
|
|
- listFlowForm,
|
|
|
- delFlowForm, genFlowForm,
|
|
|
-} from "/@/api/flow/flowForm";
|
|
|
-import {
|
|
|
- FlowFormTableColumns,
|
|
|
- FlowFormInfoData,
|
|
|
- FlowFormTableDataState,
|
|
|
-} from "/@/views/flow/flowForm/list/component/model"
|
|
|
-import ApiV1FlowFlowFormDetail from "/@/views/flow/flowForm/list/component/detail.vue"
|
|
|
-import {useRouter} from "vue-router";
|
|
|
+ FlowFormInfoData,
|
|
|
+ FlowFormTableColumns,
|
|
|
+ FlowFormTableDataState
|
|
|
+} from '/@/views/flow/flowForm/list/component/model'
|
|
|
+import ApiV1FlowFlowFormDetail from '/@/views/flow/flowForm/list/component/detail.vue'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import download from 'downloadjs'
|
|
|
+import { useFileDialog } from '@vueuse/core'
|
|
|
+
|
|
|
export default defineComponent({
|
|
|
- name: "ApiV1FlowFlowFormList",
|
|
|
- components:{
|
|
|
- ApiV1FlowFlowFormDetail
|
|
|
- },
|
|
|
- setup() {
|
|
|
- const router = useRouter();
|
|
|
- const {proxy} = <any>getCurrentInstance()
|
|
|
- const loading = ref(false)
|
|
|
- const queryRef = ref()
|
|
|
- const editRef = ref();
|
|
|
- const detailRef = ref();
|
|
|
- // 是否显示所有搜索选项
|
|
|
- const showAll = ref(false)
|
|
|
- // 非单个禁用
|
|
|
- const single = ref(true)
|
|
|
- // 非多个禁用
|
|
|
- const multiple =ref(true)
|
|
|
- const word = computed(()=>{
|
|
|
- if(showAll.value === false) {
|
|
|
- //对文字进行处理
|
|
|
- return "展开搜索";
|
|
|
- } else {
|
|
|
- return "收起搜索";
|
|
|
- }
|
|
|
- })
|
|
|
- // 字典选项数据
|
|
|
- const {
|
|
|
- flow_form_status,
|
|
|
- } = proxy.useDict(
|
|
|
- 'flow_form_status',
|
|
|
- )
|
|
|
- const state = reactive<FlowFormTableDataState>({
|
|
|
- ids:[],
|
|
|
- tableData: {
|
|
|
- data: [],
|
|
|
- total: 0,
|
|
|
- loading: false,
|
|
|
- param: {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10,
|
|
|
- name: undefined,
|
|
|
- status: undefined,
|
|
|
- createdAt: undefined,
|
|
|
- dateRange: [],
|
|
|
- isPub:undefined
|
|
|
- },
|
|
|
- },
|
|
|
- });
|
|
|
- // 页面加载时
|
|
|
- onMounted(() => {
|
|
|
- initTableData();
|
|
|
- });
|
|
|
- // 初始化表格数据
|
|
|
- const initTableData = () => {
|
|
|
- flowFormList()
|
|
|
- };
|
|
|
- /** 重置按钮操作 */
|
|
|
- const resetQuery = (formEl: FormInstance | undefined) => {
|
|
|
- if (!formEl) return
|
|
|
- formEl.resetFields()
|
|
|
- flowFormList()
|
|
|
- };
|
|
|
- // 获取列表数据
|
|
|
- const flowFormList = ()=>{
|
|
|
- loading.value = true
|
|
|
- listFlowForm(state.tableData.param).then((res:any)=>{
|
|
|
- let list = res.list??[];
|
|
|
- list.map((item:any)=>{
|
|
|
- item.createdBy = item.createdUser?.userNickname
|
|
|
- })
|
|
|
- state.tableData.data = list;
|
|
|
- state.tableData.total = res.total;
|
|
|
- loading.value = false
|
|
|
- })
|
|
|
- };
|
|
|
- const toggleSearch = () => {
|
|
|
- showAll.value = !showAll.value;
|
|
|
- }
|
|
|
- // 状态字典翻译
|
|
|
- const statusFormat = (row:FlowFormTableColumns) => {
|
|
|
- return proxy.selectDictLabel(flow_form_status.value, row.status);
|
|
|
- }
|
|
|
- const isPubFormat = (row:FlowFormTableColumns)=>{
|
|
|
- return row.isPub?"已部署":"未部署"
|
|
|
- }
|
|
|
- // 多选框选中数据
|
|
|
- const handleSelectionChange = (selection:Array<FlowFormInfoData>) => {
|
|
|
- state.ids = selection.map(item => item.id)
|
|
|
- single.value = selection.length!=1
|
|
|
- multiple.value = !selection.length
|
|
|
- }
|
|
|
- const handleAdd = ()=>{
|
|
|
- router.push("/flow/flowForm/formDesign")
|
|
|
- }
|
|
|
- const handleUpdate = (row: FlowFormTableColumns) => {
|
|
|
- if(!row){
|
|
|
- row = state.tableData.data.find((item:FlowFormTableColumns)=>{
|
|
|
- return item.id ===state.ids[0]
|
|
|
- }) as FlowFormTableColumns
|
|
|
- }
|
|
|
- router.push("/flow/flowForm/formDesign?id="+row.id)
|
|
|
- };
|
|
|
- const handleGen = (row: FlowFormTableColumns) => {
|
|
|
- ElMessageBox.confirm('您确定要部署表单？部署将覆盖原有数据，请确认是否已备份。', '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- }).then(()=>{
|
|
|
- genFlowForm(row.id).then(()=>{
|
|
|
- ElMessage.success('部署成功');
|
|
|
- flowFormList();
|
|
|
- })
|
|
|
- }).catch()
|
|
|
- }
|
|
|
- const handleDelete = (row: FlowFormTableColumns) => {
|
|
|
- let msg = '你确定要删除所选数据？';
|
|
|
- let id:number[] = [] ;
|
|
|
- if(row){
|
|
|
- msg = `此操作将永久删除数据，是否继续?`
|
|
|
- id = [row.id]
|
|
|
- }else{
|
|
|
- id = state.ids
|
|
|
- }
|
|
|
- if(id.length===0){
|
|
|
- ElMessage.error('请选择要删除的数据。');
|
|
|
- return
|
|
|
- }
|
|
|
- ElMessageBox.confirm(msg, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- delFlowForm(id).then(()=>{
|
|
|
- ElMessage.success('删除成功');
|
|
|
- flowFormList();
|
|
|
- })
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
- }
|
|
|
- const handleView = (row:FlowFormTableColumns)=>{
|
|
|
- detailRef.value.openDialog(toRaw(row));
|
|
|
- }
|
|
|
- return {
|
|
|
- proxy,
|
|
|
- editRef,
|
|
|
- detailRef,
|
|
|
- showAll,
|
|
|
- loading,
|
|
|
- single,
|
|
|
- multiple,
|
|
|
- word,
|
|
|
- queryRef,
|
|
|
- resetQuery,
|
|
|
- flowFormList,
|
|
|
- toggleSearch,
|
|
|
- statusFormat,
|
|
|
- flow_form_status,
|
|
|
- handleSelectionChange,
|
|
|
- handleAdd,
|
|
|
- handleUpdate,
|
|
|
- handleDelete,
|
|
|
- handleView,
|
|
|
- handleGen,
|
|
|
- isPubFormat,
|
|
|
- ...toRefs(state),
|
|
|
- }
|
|
|
- }
|
|
|
+ name: 'ApiV1FlowFlowFormList',
|
|
|
+ components: {
|
|
|
+ ApiV1FlowFlowFormDetail,
|
|
|
+ },
|
|
|
+ setup() {
|
|
|
+ const router = useRouter()
|
|
|
+ const { proxy } = <any>getCurrentInstance()
|
|
|
+ const loading = ref(false)
|
|
|
+ const queryRef = ref()
|
|
|
+ const editRef = ref()
|
|
|
+ const detailRef = ref()
|
|
|
+ // 是否显示所有搜索选项
|
|
|
+ const showAll = ref(false)
|
|
|
+ // 非单个禁用
|
|
|
+ const single = ref(true)
|
|
|
+ // 非多个禁用
|
|
|
+ const multiple = ref(true)
|
|
|
+ const word = computed(() => {
|
|
|
+ if (showAll.value === false) {
|
|
|
+ //对文字进行处理
|
|
|
+ return '展开搜索'
|
|
|
+ } else {
|
|
|
+ return '收起搜索'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 字典选项数据
|
|
|
+ const { flow_form_status } = proxy.useDict('flow_form_status')
|
|
|
+ const state = reactive<FlowFormTableDataState>({
|
|
|
+ ids: [],
|
|
|
+ tableData: {
|
|
|
+ data: [],
|
|
|
+ total: 0,
|
|
|
+ loading: false,
|
|
|
+ param: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ name: undefined,
|
|
|
+ status: undefined,
|
|
|
+ createdAt: undefined,
|
|
|
+ dateRange: [],
|
|
|
+ isPub: undefined,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ })
|
|
|
+ // 页面加载时
|
|
|
+ onMounted(() => {
|
|
|
+ initTableData()
|
|
|
+ })
|
|
|
+ // 初始化表格数据
|
|
|
+ const initTableData = () => {
|
|
|
+ flowFormList()
|
|
|
+ }
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ const resetQuery = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return
|
|
|
+ formEl.resetFields()
|
|
|
+ flowFormList()
|
|
|
+ }
|
|
|
+ // 获取列表数据
|
|
|
+ const flowFormList = () => {
|
|
|
+ loading.value = true
|
|
|
+ listFlowForm(state.tableData.param).then((res: any) => {
|
|
|
+ let list = res.list ?? []
|
|
|
+ list.map((item: any) => {
|
|
|
+ item.createdBy = item.createdUser?.userNickname
|
|
|
+ })
|
|
|
+ state.tableData.data = list
|
|
|
+ state.tableData.total = res.total
|
|
|
+ loading.value = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const toggleSearch = () => {
|
|
|
+ showAll.value = !showAll.value
|
|
|
+ }
|
|
|
+ // 状态字典翻译
|
|
|
+ const statusFormat = (row: FlowFormTableColumns) => {
|
|
|
+ return proxy.selectDictLabel(flow_form_status.value, row.status)
|
|
|
+ }
|
|
|
+ const isPubFormat = (row: FlowFormTableColumns) => {
|
|
|
+ return row.isPub ? '已部署' : '未部署'
|
|
|
+ }
|
|
|
+ // 多选框选中数据
|
|
|
+ const handleSelectionChange = (selection: Array<FlowFormInfoData>) => {
|
|
|
+ state.ids = selection.map((item) => item.id)
|
|
|
+ single.value = selection.length != 1
|
|
|
+ multiple.value = !selection.length
|
|
|
+ }
|
|
|
+ const handleAdd = () => {
|
|
|
+ router.push('/flow/flowForm/formDesign')
|
|
|
+ }
|
|
|
+ const handleUpdate = (row: FlowFormTableColumns) => {
|
|
|
+ if (!row) {
|
|
|
+ row = state.tableData.data.find((item: FlowFormTableColumns) => {
|
|
|
+ return item.id === state.ids[0]
|
|
|
+ }) as FlowFormTableColumns
|
|
|
+ }
|
|
|
+ router.push('/flow/flowForm/formDesign?id=' + row.id)
|
|
|
+ }
|
|
|
+ const handleGen = (row: FlowFormTableColumns) => {
|
|
|
+ ElMessageBox.confirm('您确定要部署表单？部署将覆盖原有数据，请确认是否已备份。', '提示', {
|
|
|
+ confirmButtonText: '确认',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ genFlowForm(row.id).then(() => {
|
|
|
+ ElMessage.success('部署成功')
|
|
|
+ flowFormList()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch()
|
|
|
+ }
|
|
|
+ const handleDelete = (row: FlowFormTableColumns) => {
|
|
|
+ let msg = '你确定要删除所选数据？'
|
|
|
+ let id: number[] = []
|
|
|
+ if (row) {
|
|
|
+ msg = `此操作将永久删除数据，是否继续?`
|
|
|
+ id = [row.id]
|
|
|
+ } else {
|
|
|
+ id = state.ids
|
|
|
+ }
|
|
|
+ if (id.length === 0) {
|
|
|
+ ElMessage.error('请选择要删除的数据。')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ ElMessageBox.confirm(msg, '提示', {
|
|
|
+ confirmButtonText: '确认',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ delFlowForm(id).then(() => {
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ flowFormList()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(() => {})
|
|
|
+ }
|
|
|
+ const handleView = (row: FlowFormTableColumns) => {
|
|
|
+ detailRef.value.openDialog(toRaw(row))
|
|
|
+ }
|
|
|
+
|
|
|
+ const { open, files, reset } = useFileDialog({
|
|
|
+ multiple: false,
|
|
|
+ accept: '.json',
|
|
|
+ })
|
|
|
+ const handleImport = open
|
|
|
+
|
|
|
+ watch(files, async (newVal) => {
|
|
|
+ if (newVal === null || newVal?.length === 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const file = newVal[0]
|
|
|
+ const json = await new Promise<string>((resolve, reject) => {
|
|
|
+ const reader = new FileReader()
|
|
|
+ reader.readAsText(file)
|
|
|
+ reader.onload = function (e: ProgressEvent<FileReader>) {
|
|
|
+ if (e.target === null) {
|
|
|
+ reject()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (typeof e.target.result == 'string') {
|
|
|
+ resolve(e.target.result)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const x = JSON.parse(json)
|
|
|
+ const result = await Promise.all<boolean>(
|
|
|
+ x.map(async (it: FlowFormInfoData) => {
|
|
|
+ return await addFlowForm(it)
|
|
|
+ .then(() => true)
|
|
|
+ .catch(() => false)
|
|
|
+ })
|
|
|
+ )
|
|
|
+
|
|
|
+ const error = result.filter((it) => !it).length
|
|
|
+ if (error == 0) {
|
|
|
+ ElMessage.success('导入成功')
|
|
|
+ flowFormList()
|
|
|
+ reset()
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ await ElMessageBox.alert(`导入失败: 有 ${error} 个数据导入失败。`, '提示', {
|
|
|
+ confirmButtonText: '确认',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+
|
|
|
+ reset()
|
|
|
+ })
|
|
|
+
|
|
|
+ const handleExport = async () => {
|
|
|
+ const exp: Array<any> = await Promise.all(state.ids.map(getFlowForm))
|
|
|
+ download(
|
|
|
+ JSON.stringify(
|
|
|
+ exp.map((it) => {
|
|
|
+ return {
|
|
|
+ name: it.name,
|
|
|
+ conf: it.conf,
|
|
|
+ fields: it.fields,
|
|
|
+ remark: it.remark,
|
|
|
+ status: it.status,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ ),
|
|
|
+ 'export.json'
|
|
|
+ )
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ proxy,
|
|
|
+ editRef,
|
|
|
+ detailRef,
|
|
|
+ showAll,
|
|
|
+ loading,
|
|
|
+ single,
|
|
|
+ multiple,
|
|
|
+ word,
|
|
|
+ queryRef,
|
|
|
+ resetQuery,
|
|
|
+ flowFormList,
|
|
|
+ toggleSearch,
|
|
|
+ statusFormat,
|
|
|
+ flow_form_status,
|
|
|
+ handleSelectionChange,
|
|
|
+ handleAdd,
|
|
|
+ handleUpdate,
|
|
|
+ handleDelete,
|
|
|
+ handleView,
|
|
|
+ handleGen,
|
|
|
+ isPubFormat,
|
|
|
+ handleImport,
|
|
|
+ handleExport,
|
|
|
+ ...toRefs(state),
|
|
|
+ }
|
|
|
+ },
|
|
|
})
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
- .colBlock {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .colNone {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .ml-2{margin: 3px;}
|
|
|
+.colBlock {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.colNone {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.ml-2 {
|
|
|
+ margin: 3px;
|
|
|
+}
|
|
|
</style>
|
