11 changed files with 452 additions and 52 deletions
@ -0,0 +1,169 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-03-21 09:51:02 |
||||
|
@ 备注: 自定义表单分组内容列表 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { customerFormCont } from "@/api/DesignForm/type"; |
||||
|
import { getCustomerFormList } from '@/api/DesignForm/requestapi' |
||||
|
import {Delete,Edit,View,MoreFilled} from '@element-plus/icons-vue' |
||||
|
|
||||
|
import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue" |
||||
|
import TaskCustomerForm from '@/views/taskplatform/taskmanagement/taskcustomerformnew.vue' |
||||
|
|
||||
|
|
||||
|
const props = defineProps({ |
||||
|
groupId:{ |
||||
|
type:String, |
||||
|
default:"" |
||||
|
}, |
||||
|
drawerWith:{ |
||||
|
type:Number, |
||||
|
default:true |
||||
|
}, |
||||
|
formKey:{ |
||||
|
type:String, |
||||
|
default:"" |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
const emits = defineEmits(["update:formKey"]); |
||||
|
|
||||
|
//表单ID |
||||
|
const formKeyStr = computed({ |
||||
|
get() { |
||||
|
return props.formKey |
||||
|
}, |
||||
|
set(val: formStruct) { |
||||
|
emits('update:formKey', val) |
||||
|
} |
||||
|
}); |
||||
|
const formId = ref<string>("") |
||||
|
const versionTitle = ref<string>("") //表单名称 |
||||
|
const versionId = ref<string>("") //表单版本号 |
||||
|
const addFormIsShow = ref(false) |
||||
|
const openTaskDrawer = ref(false) //新增任务 |
||||
|
const squareUrl = ref<string>('https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png') |
||||
|
const pageApp = ref<number>(1) //页码 |
||||
|
const pageAppSize = ref<number>(12) //每页显示几个 |
||||
|
const pageAppTotal = ref<number>(0) //总记录数 |
||||
|
const contList = ref<customerFormCont[]>() |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-03-21 10:54:23 |
||||
|
@ 功能: 获取表单列表 |
||||
|
*/ |
||||
|
const getFormAppList = () => { |
||||
|
let sendInfo = { |
||||
|
page:pageApp.value, |
||||
|
pagesize:pageAppSize.value, |
||||
|
groupId:props.groupId |
||||
|
} |
||||
|
getCustomerFormList(sendInfo) |
||||
|
.then(({ data }) => { |
||||
|
// console.log("搜索表单-->",data); |
||||
|
pageAppTotal.value = data.total |
||||
|
contList.value = data.list |
||||
|
}) |
||||
|
.finally(() => {}) |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-03-21 13:39:51 |
||||
|
@ 功能: 创建表单任务 |
||||
|
*/ |
||||
|
const startUsing = (id:string,title:string) => { |
||||
|
versionId.value = id |
||||
|
versionTitle.value = title |
||||
|
openTaskDrawer.value = true |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-03-21 10:57:11 |
||||
|
@ 功能: 编辑表单 |
||||
|
*/ |
||||
|
const editFormApp = (id:string) => { |
||||
|
formId.value = id.toString() |
||||
|
addFormIsShow.value= true |
||||
|
console.log("编辑表单",id,"-",formId.value,"-",addFormIsShow.value) |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-03-09 09:06:44 |
||||
|
@ 功能: 刷新页面 |
||||
|
*/ |
||||
|
const refreshPage = (pageType:string) =>{ |
||||
|
addFormIsShow.value = false; |
||||
|
getFormAppList() |
||||
|
} |
||||
|
onMounted(()=>{ |
||||
|
getFormAppList() |
||||
|
}) |
||||
|
</script> |
||||
|
<template> |
||||
|
<div> |
||||
|
<el-row :gutter="10" > |
||||
|
<el-col v-for="item in contList" :key="item.id" :xs="8" :sm="12" :md="8" :lg="8" :xl="8" style=" margin-top: 10px;"> |
||||
|
<el-card class="cardpattern" body-style="padding:5px;"> |
||||
|
<img |
||||
|
v-if="item.icon==''" |
||||
|
:src="squareUrl" |
||||
|
title="示例图片" |
||||
|
class="picture" |
||||
|
@click.top="startUsing(item.id,item.name)" |
||||
|
/> |
||||
|
<img |
||||
|
v-else |
||||
|
:src="item.icon" |
||||
|
title="示例图片" |
||||
|
class="picture" |
||||
|
@click.top="startUsing(item.id,item.name)" |
||||
|
/> |
||||
|
<div class="cardhead"> |
||||
|
<el-text class="w-150px mb-2" truncated :title="item.name" @click.top="startUsing(item.id,item.name)">{{item.name}}</el-text> |
||||
|
</div> |
||||
|
<el-row> |
||||
|
<el-col :span="8" class="but_centent"> |
||||
|
<el-button size="small" circle class="button" :icon="View"></el-button> |
||||
|
</el-col> |
||||
|
<el-col :span="8" class="but_centent"> |
||||
|
<el-button size="small" circle class="button" :icon="Edit" @click="editFormApp(item.idStr)"></el-button> |
||||
|
</el-col> |
||||
|
<el-col :span="8" class="but_centent"> |
||||
|
<el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard(index)"></el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<div class="formGroupPage"> |
||||
|
<el-pagination layout="prev, pager, next" v-model:current-page="pageApp" :page-size="pageAppSize" :total="pageAppTotal" /> |
||||
|
</div> |
||||
|
<TaskCustomerForm v-model:isopen="openTaskDrawer" :versionid="versionId" :versiontitle="versionTitle" :drawerwith="props.drawerWith" @searchquery="getFormAppList" /> |
||||
|
<LowCodeFormPage v-if="addFormIsShow" :drawer-with="props.drawerWith" v-model:form-key="formId" @refreshPage="refreshPage" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.cardhead{ |
||||
|
padding: 5px 0; |
||||
|
} |
||||
|
.formGroupPage{ |
||||
|
width:100%; |
||||
|
text-align: center; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
/* 图片 */ |
||||
|
.picture { |
||||
|
height: 100%; |
||||
|
min-height: 50px; |
||||
|
max-height: 100px; |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
min-width: 50px; |
||||
|
} |
||||
|
.but_centent{ |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue