|
|
@@ -0,0 +1,206 @@
|
|
|
+<template>
|
|
|
+ <BasicModal
|
|
|
+ width="1200px"
|
|
|
+ v-bind="$attrs"
|
|
|
+ @register="registerModal"
|
|
|
+ :title="getTitle"
|
|
|
+ @ok="handleSubmit"
|
|
|
+ :useWrapper="true"
|
|
|
+ :minHeight="500"
|
|
|
+ >
|
|
|
+ <div class="process-cofig">
|
|
|
+ <a-form
|
|
|
+ ref="formRef"
|
|
|
+ :model="formState"
|
|
|
+ :rules="rules"
|
|
|
+ :label-col="labelCol"
|
|
|
+ :wrapper-col="wrapperCol"
|
|
|
+ >
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="title">基本信息</div>
|
|
|
+ <div class="form-continer">
|
|
|
+ <a-form-item label="业务类型" name="type">
|
|
|
+ <a-select v-model:value="formState.type" placeholder="请选择业务类型">
|
|
|
+ <template v-for="item in dicBusiness" :key="item.value">
|
|
|
+ <a-select-option :value="item.value">{{ item.label }}</a-select-option>
|
|
|
+ </template>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="title">步骤配置</div>
|
|
|
+ <div class="form-continer"></div>
|
|
|
+ </div>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ </BasicModal>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
|
|
|
+import { defineComponent, ref, computed, unref, reactive, onMounted, watch, UnwrapRef, toRaw } from 'vue';
|
|
|
+import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
+import { BasicForm, useForm } from '/@/components/Form/index';
|
|
|
+import { busType, accountFormSchema, accountFormSchema2 } from './configData';
|
|
|
+import { Upload } from 'ant-design-vue';
|
|
|
+import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
+import { addFileResource } from '../../api/fileUploadApi';
|
|
|
+interface FormState {
|
|
|
+ type: string;
|
|
|
+ steps: Object[];
|
|
|
+}
|
|
|
+export default defineComponent({
|
|
|
+ name: 'AccountModal',
|
|
|
+ components: {
|
|
|
+ BasicModal,
|
|
|
+ BasicForm,
|
|
|
+ Upload,
|
|
|
+ },
|
|
|
+ emits: ['success', 'register'],
|
|
|
+ setup(_, { emit }) {
|
|
|
+ const formRef = ref();
|
|
|
+ let show1 = ref(true);
|
|
|
+ const isUpdate = ref(true);
|
|
|
+ const rowId = ref('');
|
|
|
+ const postData = reactive({});
|
|
|
+ const formState: UnwrapRef<FormState> = reactive({
|
|
|
+ type: '',
|
|
|
+ steps: [],
|
|
|
+ });
|
|
|
+ const rules = {
|
|
|
+ type: [{ required: true, message: '请选择业务类型', trigger: 'change' }],
|
|
|
+ steps: [{ required: true, message: '请配置审核步骤', trigger: 'change', type: 'array' }],
|
|
|
+ };
|
|
|
+ const dicBusiness = busType;
|
|
|
+ onMounted(async () => {});
|
|
|
+ const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
|
|
|
+ labelWidth: 100,
|
|
|
+ schemas: show1 ? accountFormSchema : accountFormSchema2,
|
|
|
+ showActionButtonGroup: false,
|
|
|
+ actionColOptions: {
|
|
|
+ span: 18,
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
|
|
+ await resetFields();
|
|
|
+ setModalProps({ confirmLoading: false });
|
|
|
+ isUpdate.value = !!data?.isUpdate;
|
|
|
+ if (unref(isUpdate)) {
|
|
|
+ rowId.value = data.record.id;
|
|
|
+ setFieldsValue(data.record);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
|
|
|
+
|
|
|
+ async function handleSubmit() {
|
|
|
+ setModalProps({ confirmLoading: true });
|
|
|
+ try {
|
|
|
+ const { createMessage } = useMessage();
|
|
|
+ const values = await validate(['parentId']);
|
|
|
+ Object.assign(postData, values);
|
|
|
+
|
|
|
+ console.log('准备传递的参数' + JSON.stringify(postData));
|
|
|
+
|
|
|
+ await addFileResource(paramsToFormData(postData as any), unref(isUpdate));
|
|
|
+ closeModal();
|
|
|
+ emit('success');
|
|
|
+ createMessage.success(unref(isUpdate) ? '编辑成功' : '新增成功');
|
|
|
+ } finally {
|
|
|
+ setTimeout(() => {
|
|
|
+ setModalProps({ confirmLoading: false });
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function preProcessData(data) {
|
|
|
+ Object.keys(data).forEach((item) => {
|
|
|
+ if (typeof data[item] === 'undefined' || data[item] === null || data[item] === '') {
|
|
|
+ delete data[item];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return data;
|
|
|
+ }
|
|
|
+
|
|
|
+ function paramsToFormData(obj) {
|
|
|
+ const data = preProcessData(obj);
|
|
|
+ const formData = new FormData();
|
|
|
+ Object.keys(data).forEach((key) => {
|
|
|
+ if (data[key] instanceof Array) {
|
|
|
+ data[key].forEach((item) => {
|
|
|
+ formData.append(key, item);
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ formData.append(key, obj[key]);
|
|
|
+ });
|
|
|
+ return formData;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 菜单点击事件
|
|
|
+ const menuClick = (value) => {
|
|
|
+ console.log('canshu1111' + JSON.stringify(value));
|
|
|
+ if (value.key == 'mail1') {
|
|
|
+ show1.value = true;
|
|
|
+ } else {
|
|
|
+ show1.value = false;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const onSubmit = () => {
|
|
|
+ formRef.value
|
|
|
+ .validate()
|
|
|
+ .then(() => {
|
|
|
+ console.log('values', formState, toRaw(formState));
|
|
|
+ })
|
|
|
+ .catch((error: ValidateErrorEntity<FormState>) => {
|
|
|
+ console.log('error', error);
|
|
|
+ });
|
|
|
+ };
|
|
|
+ const resetForm = () => {
|
|
|
+ formRef.value.resetFields();
|
|
|
+ };
|
|
|
+
|
|
|
+ return {
|
|
|
+ formRef,
|
|
|
+ formState,
|
|
|
+ rules,
|
|
|
+ dicBusiness,
|
|
|
+ labelCol: { span: 2 },
|
|
|
+ wrapperCol: { span: 4 },
|
|
|
+ registerModal,
|
|
|
+ registerForm,
|
|
|
+ handleSubmit,
|
|
|
+ getTitle,
|
|
|
+ menuClick,
|
|
|
+ show1,
|
|
|
+ onSubmit,
|
|
|
+ resetForm,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style scoped lang="less">
|
|
|
+.process-cofig {
|
|
|
+ height: 50vh;
|
|
|
+ padding: 0 20px;
|
|
|
+ .info-item {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .title {
|
|
|
+ padding-left: 10px;
|
|
|
+ border-left: 3px solid #2d74e7;
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 300;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .form-continer {
|
|
|
+ padding-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|