admin-ui/src/views/flow/flowForm/center/index.vue

<template>
	<div class="splitpanes-container">
		<el-card shadow="hover" header="表单中心">
			<el-alert
				title="用于发起自定义表单审批流程，点击选择左侧表单类型进行表单数据管理"
				type="success"
				:closable="false"
				class="mb15"
			></el-alert>
			<splitpanes class="default-theme">
				<pane :size="20">
          <el-card shadow="hover" header="流程表单">
            <el-table v-loading="loading" :data="tableData.data" @current-change="handleCurrentForm" highlight-current-row>
              <el-table-column prop="id" label="ID" width="100" />
              <el-table-column prop="name" label="表单名称"  />
            </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"
                layout="prev, next"
            />
          </el-card>
        </pane>
				<pane :size="80">
          <el-card shadow="hover" :header="'表单数据'+(currentForm.name?('-'+currentForm.name):'')">
            <el-row :gutter="10" class="mb8" v-show="showTablePanel">
              <el-col :span="1.5">
                <el-button
                    type="primary"
                    @click="handleDataAdd"
                    v-auth="'api/v1/flow/flowForm/addFormData'"
                ><el-icon><ele-Plus /></el-icon>发起表单审批</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                    type="success"
                    :disabled="single"
                    @click="handleDataUpdate(null)"
                    v-auth="'api/v1/flow/flowForm/editFormData'"
                ><el-icon><ele-Edit /></el-icon>修改</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                    type="danger"
                    :disabled="multiple"
                    @click="handleDataDelete(null)"
                    v-auth="'api/v1/flow/flowForm/delFormData'"
                ><el-icon><ele-Delete /></el-icon>删除</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button  @click="getFormDataList"><el-icon><ele-Refresh /></el-icon>刷新</el-button>
              </el-col>
            </el-row>
            <el-table v-loading="formLoading" :data="tableFormData" @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 v-for="(item,index) in fromFields" :key="item.field" :label="item.title" align="center" :prop="item.field"
                               min-width="150px"
              />
              <el-table-column label="状态" align="center" prop="status" min-width="150px">
                <template #default="scope">
                  <el-tag :type="columnColor(scope.row)">{{ statusFormat(scope.row) }}</el-tag>
                </template>
              </el-table-column>

              <el-table-column label="创建时间" align="center" prop="createdAt"
                               min-width="150px"
              >
                <template #default="scope">
                  <span>{{ proxy.parseTime(scope.row.created_at, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="创建人" align="center" prop="created_user.userNickname"
                               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="handleDataView(scope.row)"
                      v-auth="'api/v1/flow/flowForm/getFormData'"
                  ><el-icon><ele-View /></el-icon>详情</el-button>
                  <el-button
                      type="primary"
                      link
                      @click="handleDataUpdate(scope.row)"
                      v-auth="'api/v1/flow/flowForm/editFormData'"
                  ><el-icon><ele-EditPen /></el-icon>修改</el-button>
                  <el-button
                      v-if="scope.row.actionBtn && scope.row.actionBtn.type!='disabled'"
                      type="primary"
                      link
                      @click="handleStartFlow(scope.row)"
                  ><el-icon><ele-Coordinate/></el-icon>{{scope.row.actionBtn.title}}</el-button>
                  <el-button
                      type="primary"
                      link
                      @click="handleDataDelete(scope.row)"
                      v-auth="'api/v1/flow/flowForm/delFormData'"
                  ><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
                v-show="tableFormParam.total>0"
                :total="tableFormParam.total"
                v-model:page="tableFormParam.pageNum"
                v-model:limit="tableFormParam.pageSize"
                @pagination="getFormDataList"
            />
          </el-card>
				</pane>
			</splitpanes>
		</el-card>
    <add-form-data
        ref="addFormDataRef"
        @getFormDataList="getFormDataList"
    >
    </add-form-data>
    <data-detail
        ref="dataDetailRef"
    >
    </data-detail>
    <checkFlow ref="ckFlowRef" @getList="getFormDataList"></checkFlow>
	</div>
</template>

<script lang="ts" setup>
import checkFlow from "/@/components/gFlow/checkFlow.vue"
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import {getCurrentInstance, onMounted, reactive, ref, toRefs, unref} from "vue";
import {delFlowFormData, listFlowForm, ListFlowFormData} from "/@/api/flow/flowForm";
import {
  FlowFormTableColumns,
  FlowFormTableDataState,
  FormFieldsData
} from "/@/views/flow/flowForm/list/component/model";
import AddFormData from "/@/views/flow/flowForm/list/component/addFormData.vue";
import {FlowDemoTableColumns} from "/@/views/flow/flowDemo/list/component/model";
import {ElMessage, ElMessageBox} from "element-plus";
import DataDetail from "/@/views/flow/flowForm/list/component/dataDetail.vue";

const {proxy} = <any>getCurrentInstance()
const loading = ref(false)
const single = ref(true)
const multiple = ref(true)
const ckFlowRef = ref()
const showTablePanel = ref(false)
const currentForm = ref<FlowFormTableColumns>({} as FlowFormTableColumns)
const addFormDataRef = ref()
const dataDetailRef = ref()
const formLoading = ref(false)
const fromFields = ref<FormFieldsData[]>([])
const tableFormData = ref<any[]>([])
const tableFormParam = ref({
  total:0,
  pageNum: 1,
  pageSize: 10,
  formId: 0
})
const state = reactive<FlowFormTableDataState>({
  ids:[],
  tableData: {
    data: [],
    total: 0,
    loading: false,
    param: {
      pageNum: 1,
      pageSize: 10,
      name: undefined,
      status: 1,
      isPub:true,
      createdAt: undefined,
      dateRange: []
    },
  },
});
const {tableData}  = toRefs(state)
onMounted(()=>{
  initTableData();
})
const initTableData = ()=>{
  flowFormList();
}
const flowFormList = ()=>{
  loading.value = true
  listFlowForm(state.tableData.param).then((res:any)=>{
    let list = res.data.list??[];
    list.map((item:any)=>{
      item.createdBy = item.createdUser?.userNickname
    })
    state.tableData.data = list;
    state.tableData.total = res.data.total;
    loading.value = false
  })
}
const handleCurrentForm = (row:FlowFormTableColumns)=>{
  showTablePanel.value = true
  currentForm.value = row
  tableFormParam.value = {
    total:0,
    pageNum: 1,
    pageSize: 10,
    formId: row.id
  }
  getFormDataList()
}
const getFormDataList = ()=>{
  formLoading.value = true
  ListFlowFormData(tableFormParam.value).then((res:any)=>{
    tableFormData.value = res.data.list
    tableFormParam.value.total = res.data.total
    fromFields.value = res.data.fields.filter((item:FormFieldsData)=>{
      return item.type=='input' && item.display && !item.hidden
    }).slice(0,3)
    formLoading.value = false
  })
}
// 多选框选中数据
const handleSelectionChange = (selection:Array<any>) => {
  state.ids = selection.map(item => item.id)
  single.value = selection.length!=1
  multiple.value = !selection.length
}
const columnColor=(row:FlowDemoTableColumns)=>{
  switch (row.status.toString()){
    case '-1':
      return "danger"
    case '0':
      return "info"
    case '1':
      return "warning"
    case '2':
      return "success"
  }
}
// 字典选项数据
const {
  flow_status,
} = proxy.useDict(
    'flow_status',
)
// 审核状态字典翻译
const statusFormat = (row:FlowDemoTableColumns) => {
  return proxy.selectDictLabel(flow_status.value, row.status);
}
const handleDataAdd = ()=>{
  currentForm.value.dataId = 0
  addFormDataRef.value.openDialog(currentForm.value)
}
const handleDataView = (row:any)=>{
  currentForm.value.dataId = row.id as number
  currentForm.value.actionBtn = row.actionBtn
  dataDetailRef.value.openDialog(currentForm.value)
}
const handleDataUpdate = (row:any)=>{
  if(row==null|| typeof row == 'undefined'){
    currentForm.value.dataId = state.ids[0]
  }else{
    currentForm.value.dataId = row.id as number
  }
  addFormDataRef.value.openDialog(currentForm.value)
}
const handleStartFlow =(row: FlowDemoTableColumns|null)=>{
  ckFlowRef.value.handleStartFlow(row)
}
const handleDataDelete = (row:any)=>{
  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(() => {
    delFlowFormData({formId:currentForm.value.id,ids:id}).then(()=>{
      ElMessage.success('删除成功');
      getFormDataList();
    })
  }).catch()
}
</script>

<style scoped lang="scss">

</style>