hxgksystemapp/src/views/taskplatform/taskmanagement/taskcustomerform.vue

<!--
@ 作者: 秦东
@ 时间: 2023-09-22 15:26:36
@ 备注: 回显表单
-->
<script lang='ts' setup>
import { ref, reactive, onMounted, computed, nextTick } from 'vue'
import {  useRouter } from 'vue-router'
import {
    string2json,
    stringToObj
} from '@/utils/DesignForm/form'

import { haveCustomerFormVersion } from '@/api/taskapi/management'
import { judgeSubmitCancel } from '@/api/DesignForm/requestapi'

import '@/assets/scss/element-var.scss'
import '@/assets/scss/index.scss'
import '@/assets/iconfont/iconfont.css'
import 'element-plus/dist/index.css'

const props = defineProps({
	isopen:{
		type:Boolean,
		default:true
	},
	versionid:{
		type:String,
		default:""
	},
	versiontitle:{
		type:String,
		default:""
	},
	infoid:{
		type:String,
		default:""
	}
})
const submitButton = {
    type: "div",
    control:
    {},
    config:
    {
      textAlign: "center",
      span: ""
    },
    list: [
    {
      type: "button",
      control:
      {
        label: "保存",
        type: "primary",
        key: "submit"
      },
      config:
      {
        textAlign: "center"
      }
    }]
}
const loadingData = ref(false)
const formEl = ref()
const router = useRouter()
const state = reactive<any>({
	type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
    formData: {
      list: [],
      form: {},
      config: {}
    },
    dict: {},
    formId: props.versionid,
    id: 0,
    loading: true
})
const formType = computed(() => {
    // 带有参数id为编辑状态
    if (props.infoid) {
      return 2
    } else {
      return 1
    }
})

const emits = defineEmits(["update:isopen","searchquery"]);
const drawerOpenOrClose =   computed({
	get: () => props.isopen,
	set: (val) => {
		emits("update:isopen", val);
	},
});

//获取表单数据
const getTaskFormData = () =>{
	loadingData.value = true;
	haveCustomerFormVersion({id:props.versionid})
		.then(({ data }) =>{
			console.log("表单数据",data)
			state.id=props.versionid
			state.formData = stringToObj(data.mastesform)
      		state.dict = string2json(data.dict)
				judgeSubmitCancel({"name":data.mastesformjson})
					.then((data:any) =>{
						if(data.code == 0){
							if (data.data == 3 || data.data == 4){
								state.formData.list.push(submitButton)
							}
						}
					})
		})
		.finally(()=>{
			loadingData.value = false;
		})
}

const drawerWith = ref<number>(0);
onMounted(()=>{
	drawerWith.value = window.innerWidth - 220
	
});
window.addEventListener("resize", function(){
	drawerWith.value = window.innerWidth -220
})
const beforeSubmit = (params: any) => {
    params.formId =  props.versionid
    params.id = ""
	// emits("update:isopen", false);
    return params
}
const afterSubmit = (type: string) => {
	if (type === 'success') {
		// router.go(-1)
		console.log("表单提交成功")
		emits("searchquery");
		closeAppSubmit();
	}
}
const closeAppSubmit = () => {
	emits("update:isopen", false);
	initData();
}
const initData = () => {
	state.formData = {
      list: [],
      form: {},
      config: {}
    };
	state.dict = {};
	state.formId = 0;
	state.id = 0;
	state.loading = true;
}
watch(()=>props.isopen,()=>{
	if(props.isopen){
		getTaskFormData();
	}else{
		initData()
	}
})
</script>
<template>
	<el-drawer  v-model="drawerOpenOrClose" v-loading="loadingData" :title="versiontitle"  :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawerWith" class="drawerClass" >
		<div class="drawerBody">
			<ak-form
				ref="formEl"
				:form-data="state.formData"
				:type="formType"
				:dict="state.dict"
				request-url="getFormContent"
				add-url="saveFormContent"
				edit-url="editFormContent"
				:before-submit="beforeSubmit"
				:after-submit="afterSubmit"
				:close-app-submit="closeAppSubmit"
			/>
		</div>
    	
  	</el-drawer>

</template>
<style  lang='scss'>
.drawerClass ::v-deep.el-drawer__header {
        font-size: 22px;
        text-align: center;
        margin-bottom: 0px;
        padding: 0;
        .el-drawer__close-btn{
            background-color: rgb(255, 77, 79);
            color: white;
        }
    }
    ::v-deep .el-drawer__body {
        padding: 0px;
    }
    .details {
        width: 80%;
        margin-right: 0px;
        margin-left: 20%;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }
.drawerBody{
	padding: 20px;
}
</style>