hxgksystemapp/src/views/sysworkflow/codepage/index.vue

<!--
@ 作者: 秦东
@ 时间: 2023-08-28 14:47:07
@ 备注: 表单设计
-->
<script lang='ts' setup>
import { SearchForm,customerFormCont,customerFormConfig } from "@/api/DesignForm/type";
import { getCustomerFormList,getProductionMarkForm,editProductionFormStatus } from '@/api/DesignForm/requestapi'
//引入页面
import CreateForm from '@/views/sysworkflow/codepage/createform.vue'
import SetupConfig from '@/views/sysworkflow/codepage/setupconfig.vue'


const queryParams = reactive<SearchForm>({
	page: 1,
	pagesize:15
});
const ids = ref<number[]>([]);		//记录总数
const editIds = reactive<string[]>([]);		//记录总数
const loading =ref(false);		//加载表单
const show =ref(false);		//加载表单
const drawerOpenOrClose = ref(false);
const total = ref(0);					//记录总数
const contList = ref<customerFormCont[]>()
const drawerWith = ref<number>(0);
const editid = ref<string>("")
const formConfigCont = reactive<customerFormConfig>({
	formname:"",
	formlogo:""
})
const formId = ref<string>("");
//搜索表单
function handleQuery(){
	getCustomerFormList(queryParams)
		.then(({ data }) => {
			console.log("搜索表单-->",data);
			total.value = data.total
			contList.value = data.list
		})
		.finally(() => {})
}
//重置搜索条件
function resetQuery(){}
//新增表单
function openDialog(){
	formId.value = ""
	getProductionMarkForm()
		.then(({data})=>{
			formConfigCont.formlogo = data.formlogo
			formConfigCont.formname = data.formname
			console.log("新增表单",formConfigCont)
		})
		.finally(()=>{
			drawerOpenOrClose.value = true;
		})
	
}
//删除表单
function handleDelete(){
	if(ids.value.length < 1){
		ElMessage.error('没有选中要删除得数据！')
	}else{
		ElMessageBox.confirm(
						'请问是否真的删除？删除后数据将无法找回！',
						'温馨提示！',
					{
						confirmButtonText: '删除',
						cancelButtonText: '取消',
						type: 'warning',
						draggable: true,
					})
					.then(() => {
						editProductionFormStatus({id:ids.value.map(String),status:3,is_delete:false})
						.then(({data})=>{
							handleQuery()
						})
					})
					.catch(() => {
						handleQuery()
					})
		
	}
}
//删除单一自定义表单
function editCustomerFormState(cont:customerFormCont){
	console.log("删除单一自定义表单",cont)
	editIds.push(cont.id)
	ElMessageBox.confirm(
						'请问是否真的删除？删除后数据将无法找回！',
						'温馨提示！',
					{
						confirmButtonText: '删除',
						cancelButtonText: '取消',
						type: 'warning',
						draggable: true,
					})
					.then(() => {
						editProductionFormStatus({id:editIds,status:3,is_delete:false})
						.then(({data})=>{
							handleQuery()
							editIds.splice(0,editIds.length);
						})
					})
					.catch(() => {
						handleQuery()
					})
}
/**
 * 行checkbox change事件
 */
function handleSelectionChange(selection: any) {
  ids.value = selection.map((item: any) => item.id);
}
//设置自定义表单
function setupCustomerForm(cont:customerFormCont){
	editid.value = cont.id
	show.value = true
}
onMounted(()=>{
	handleQuery();
	drawerWith.value = window.innerWidth - 220
});
window.addEventListener("resize", function(){
	drawerWith.value = window.innerWidth -220
	console.log("搜索表单-->",window.innerWidth);
})
//编辑表单
function editCustomerForm(cont:customerFormCont){
	formId.value = cont.id.toString();
	drawerOpenOrClose.value = true;
}

</script>
<template>
	<div class="app-container">
		<div class="search">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="表单名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery"
            ><template #icon><i-ep-search /></template>搜索</el-button
          >
          <el-button @click="resetQuery">
            <template #icon><i-ep-refresh /></template>
            重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
		<el-card shadow="never">
			<template #header>
        <el-button type="success" @click="openDialog()"><i-ep-plus />新增表单</el-button>
        <el-button
          type="danger"
          :disabled="ids.length === 0"
          @click="handleDelete()"
        >
					<i-ep-delete />删除表单
				</el-button>
      </template>
			<el-table
        v-loading="loading"
        highlight-current-row
				:data="contList"
        border
				@selection-change="handleSelectionChange"
      >
				<el-table-column fixed type="selection" width="55" align="center" />
				<el-table-column fixed label="表单名称" prop="name"  />
				<el-table-column label="分类" align="center" width="150">
					<template #default="scope">
						<el-tag  v-if="scope.row.classify === 1" effect="plain">表单</el-tag>
						<el-tag v-else effect="plain">流程表单</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.states === 1" type="success">启用</el-tag>
            <el-tag v-else type="info">禁用</el-tag>
          </template>
        </el-table-column>
				<el-table-column label="创建人" prop="creatername" width="140" />
				<el-table-column label="创建时间" prop="creatertime"  /> 
				<el-table-column fixed="right" label="操作" align="center" width="280">
          <template #default="scope">
            <el-button
              type="success"
              link
              size="small"
              @click.stop="setupCustomerForm(scope.row)"
              ><i-ep-Setting />设置</el-button
            >
						<el-button
              type="warning"
              link
              size="small"
              @click.stop="setupCustomerForm(scope.row)"
              ><i-ep-MessageBox />数据结构</el-button
            >
            <el-button
							
              type="primary"
              link
              size="small"
              @click.stop="editCustomerForm(scope.row)"
              ><i-ep-edit />编辑</el-button
            >
            <el-button
							
              type="danger"
              link
              size="small"
              @click.stop="editCustomerFormState(scope.row)"
              ><i-ep-delete />删除</el-button
            >
          </template>
        </el-table-column>
			</el-table>
			<pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.page"
        v-model:limit="queryParams.pagesize"
        @pagination="handleQuery"
      />
		</el-card>
	</div>
	<el-drawer  v-model="drawerOpenOrClose" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawerWith" class="drawerClass">
    <CreateForm v-model:draweropenclose="drawerOpenOrClose" :formid="formId" :formconfigcont="formConfigCont" @handlequery="handleQuery" />
  </el-drawer>
	<SetupConfig v-model:show="show" :editid="editid" @handle_query="handleQuery" />
</template>
<style  lang='scss' scoped>
.drawerClass{
	.el-drawer__body{
		padding: 0;
	}
}
</style>